javascript - Autoprefix loader breaks scss compilation in Webpack - Stack Overflow

admin管理员组

文章数量:1335861

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 piles mixins properly. When I remove the errored mixins, it piles, but doesn't prefix. Here's Webpack's pilation details from terminal, and my module structure. Any help would be appreciated.

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

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 piles mixins properly. When I remove the errored mixins, it piles, but doesn't prefix. Here's Webpack's pilation details from terminal, and my module structure. Any help would be appreciated.

https://gist.github./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"
    }]
  }

• javascript
• reactjs
• loader
• webpack
• autoprefixer

Share Improve this question Follow edited Jan 22, 2016 at 18:03 Zach Shallbetter asked May 9, 2015 at 3:19 Zach ShallbetterZach Shallbetter 1,92166 gold badges2323 silver badges3838 bronze badges 1

• some user reported that a fresh enough version of sass-loader worked for him. If you cannot get this to work, maybe it's better to go directly through autoprefixer-loader issue tracker. – Juho Vepsäläinen Commented May 9, 2015 at 6:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

I had this same issue. For me the issue was that I was including the sass-loader before the autoprefixer-loader. The autoprefixer-loader needs to first convert the css, which then converts to sass.

Looking at your log(line 83 for instance), I can see that this is indeed the case for you also. Changing the following in your webpack.config from:

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

to:

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

Should do the trick. I hope that works!

本文标签： javascriptAutoprefix loader breaks scss compilation in WebpackStack Overflow