Search code examples
javascriptreactjsloaderwebpackautoprefixer

Autoprefix loader breaks scss compilation in Webpack


I'm unable to get autoprefixer-loader 1.10 to prefix my scss/css (apparently 1.20 is broken). After adding the loader, it no longer compiles mixins properly. When I remove the errored mixins, it compiles, but doesn't prefix. Here's Webpack's compilation details from terminal, and my module structure. Any help would be appreciated.

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"
    }]
  }

Solution

  • As autoprefixer-loader is deprecated and they encourage us to use postcss instead (https://github.com/postcss/postcss-loader), I made this config that is also working:

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