Autoprefixer 加载器会破坏 Webpack 中的 scss 编译答案

【问题标题】：Autoprefix loader breaks scss compilation in WebpackAutoprefixer 加载器会破坏 Webpack 中的 scss 编译
【发布时间】：2015-07-20 01:31:36
【问题描述】：

我无法让 autoprefixer-loader 1.10 为我的 scss/css 加上前缀（显然 1.20 已损坏）。添加 loader 后，它不再正确编译 mixins。当我删除错误的 mixin 时，它会编译，但不会添加前缀。这是来自终端的 Webpack 编译详细信息，以及我的模块结构。任何帮助将不胜感激。

https://gist.github.com/zachshallbetter/efafbffa7e08bcc0aab4

  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'app/scripts')
    },
    {
      test: /\.scss$|\.css$/,
      loader: 'style-loader!css-loader!sass-loader'
    },
    {
      test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
      loader: "file"
    },
    {
      test: /\.json$/,
      loader: "raw-loader"
    }]
  }

【问题讨论】：

some user 报告说足够新鲜的 sass-loader 版本对他有用。如果你不能让它工作，也许最好直接通过 autoprefixer-loader 问题跟踪器。

标签： javascript reactjs loader webpack autoprefixer

【解决方案1】：

由于不推荐使用 autoprefixer-loader 并且他们鼓励我们改用 postcss (https://github.com/postcss/postcss-loader)，因此我制作了这个也可以使用的配置：

test: /\.scss/, loader: 'style-loader!css-loader!postcss-loader!sass-loader'

【讨论】：

【解决方案2】：

我也有同样的问题。对我来说，问题是我在 autoprefixer-loader 之前包含了 sass-loader。 autoprefixer-loader 需要先转换 css，然后再转换成 sass。

查看您的日志（例如第 83 行），我可以看到您的情况也确实如此。更改 webpack.config 中的以下内容：

loader: 'style-loader!css-loader!sass-loader'

到：

loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'

应该做的伎俩。我希望这有效！

【讨论】：

我的印象是这些加载程序从右到左运行。
"链接加载程序时，它们从右到左应用（从文件开始，返回）。" - 来自Webpack docs on Loaders
krry，你说的很对，会修改答案。
谢谢。找到这些 webpack 配置文件有多难