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中的代码。

到目前为止，我一直无法将相关的供应商前缀应用于导入的@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"
    ]
  })
}

Answer 2

我在我的代码中发现了这个问题。导入scss文件的入口点文件正在导入：

import styles from '!style-loader!css!sass!postcss-loader!./styles/styles.scss'

这覆盖了我的webpack.config文件中的配置，因此我只是更改了所有导入行以获得正确的加载程序顺序。

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

2 个答案: