8

我有一个相当复杂的样式表加载器设置：

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style",
      "css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" +
      "includePaths[]=" + other stuff)
    )
  }

效果很好，但在某些情况下，我想将modules选项添加到 css-loader，所以它看起来像这样：

require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...');

但我不能到处这样做。

我该如何配置它，以便我可以在某些要求上启用 css-loader 模块标志，同时保持其余部分相同？

也许像加载程序“别名”之类的东西，例如require('./foo.scss!my-scss-with-modules-flag-alias')？

我能想到的唯一解决方案是编写一个加载器，它进行语法转换以将加载器配置内联到某些要求调用中......但这很脆弱而且很复杂。

4

2 回答 2

16

resolveLoader.alias 将在这里工作。IE。

resolveLoader: {
    alias: {
        'with-modules': 'loader definition goes here',
    }
}

使用此配置，您可以简单地做

require('with-modules!./foo.scss');

在你的代码。

于 2015-07-09T10:25:12.150 回答
1

resolveLoader.alias 可能在给定的情况下工作，因为您使用插件作为加载程序。但是，如果您需要使用一系列加载程序，它将无法正常工作。（上面有一个功能请求：https ://github.com/webpack/webpack/issues/2772 ）。

相反，您可以在 require 语句中向文件添加参数

var styles = require('./foo.scss?modules');

并创建一个新的加载器规则：

module: {
    loaders: [
        ...
        { test: /\.scss$/, loader: 'style!css!postcss!sass' },
        { test: /\.scss\?modules$/, loader: 'style!css?modules!postcss!sass' }
    ]
}
于 2016-07-22T09:46:11.960 回答