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

Question

我无法获得 autoprefixer-loader 1.10 作为我的 scss/css 的前缀（显然 1.20 已损坏）。添加加载程序后，它不再正确编译 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"
    }]
  }

Answer 1

我遇到了同样的问题。对我来说，问题是我在 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'

应该可以解决问题。希望有用！

Answer 2

由于 autoprefixer-loader 已被弃用，他们鼓励我们改用 postcss (https://github.com/postcss/postcss-loader)，我做了这个也有效的配置：

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

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

Autoprefix loader breaks scss compilation in Webpack

javascript

loader

reactjs

webpack

autoprefixer