css - Webpack.config 在 PostCSS-Loader 之前没有运行 Sass-Loader

Question

我的配置文件目前有以下可能相关的代码:

  {
    // do not exclude `node_modules`
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      'style-loader',
      'css',
      { publicPath: '../' }
    )
  },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract(
      'style-loader',
      ['css-loader', 'postcss-loader', 'sass-loader'],
      { publicPath: '../' }
    )
  },

首先运行 sass-loader 很重要，因为 PostCSS-loader (Autoprefixer) 无法访问我拥有的 @mixin 中的代码。

到目前为止，我一直无法将相关的 vendor 前缀应用到正在导入的@mixin 代码。如果我将@mixin 代码移动到我@include 的位置，一切都会按预期进行。

Answer 1

对于Webpack 1，提取函数需要两个参数。

第一个参数将在您未将 css 提取到文件(回退)时应用。

第二个参数是用感叹号(!)分隔的加载器列表，这些加载器是从右到左应用的。

ExtractTextPlugin.extract(
  'style-loader',
  'css-loader!postcss-loader!sass-loader'
);

---

对于 Webpack 2:

ExtractTextPlugin期待加载程序或对象。

ExtractTextPlugin.extract(options: loader | object)

例子:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loader: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader",
    loader: [
      "css-loader",
      "postcss-loader",
      "sass-loader"
    ]
  })
}