Not getting autoprefixer to work with extract-text-webpack-plugin

[badtant]

Hi,

I have a working dev config for my scss like this:

var autoprefixer = require('autoprefixer');

  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
      }
    ]
  },
  sassLoader: {
    includePaths: ['node_modules/normalize.css'],
    precision: '8',
    outputStyle: 'nested'
  },
  postcss: [ autoprefixer({ browsers: ['last 10 versions'] }) ]

Now I wanted to extract the css to a file when I build for production. I get a file with the config below. The problem is that the options for postcss (for instance autoprefixer) doesn't get applied.

var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('bundle.css');

  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: extractCSS.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
      }
    ]
  },
  sassLoader: {
    includePaths: ['node_modules/normalize.css'],
    precision: '8',
    outputStyle: 'compressed'
  },
  postcss: [ autoprefixer({ browsers: ['last 10 versions'] }) ],
  plugins: [
    extractCSS
  ]
};

Can anyone see what I'm doing wrong?
Thanks

[ai]

Seems like it is problem of css-loader CSS minifier. Please check Autoprefixer FAQ for details (sorry I am in the train in the middle of Kazakhstan) - you should move browser requirements to browserslist config.

Also last 10 versions is very lame config. I am sure, that you don't care about IE 3 or old Chrome 😉. Be responsible developer, talk with your client and set actual browser requirements (it should be equal to browsers where you test your website).

[badtant]

I'm not sure what you mean :)
First you point me to css-loader and then to autoprefixer?

And yes, thats just a test config with the last 10 browsers so that I can see if it's working or not.

[ai]

Please check Autoprefixer FAQ section in Autoprefixer README. It contains question "No prefixes in production", answer will contain explanation and solution.

Sorry, I can't give you a direct link.

[badtant]

Ahh, now I see. Thanks!

[JounQin]

@badtant You should disable the Minification option of css-loader with css?-minimize.

minification

[donpinkus]

@badtant - would love to see an example of your final working config

[ai]

Webpack fixed a Autoprefixer issue, so we could just remove this section!

[badtant]

@donpinkus right now:
extractTextInstance.extract('style-loader', ['css-loader?-autoprefixer', 'postcss-loader')

[hugojing]

Thanks @JounQin and @badtant ! Both works!

    loader: ExtractTextPlugin.extract(
      'style-loader',
      'css-loader?-autoprefixer!postcss-loader'
    )

or

    loader: ExtractTextPlugin.extract(
      'style-loader',
      'css-loader?-minimize!postcss-loader'
    )

[ai]

@hugojing please write +1 in this issue webpack-contrib/css-loader#281

This is very important

[szykov]

Tried everything but still nothing. :

 module: {
        rules: [
            {
                test: /\.css$/,
                exclude: path.join(__dirname, '/angular2App/app/'),
                use: ExtractTextPlugin.extract({
                    fallback: ['style-loader'],
                    use: ['css-loader?-autoprefixer&sourceMap=true&importLoaders=1', 'postcss-loader']
                })
            },
       ...
      ]

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],

No change, it doesn't add prefixes....

[michael-ciniawsky]

@szykov

Just for getting started, but could you please use try using webpack 2 loader syntax inside ExtractTextPlugin.extract() ?

webpack.config.js

ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: [ 
     { 
       loader: 'css-loader', 
       options : { autoprefixer: false, sourceMap: true, importLoaders: 1 } 
     }, 
     'postcss-loader'
   ]
 })

postcss.config.js

plugins: [
- require('autoprefixer')
+ require('autoprefixer')()
]