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')()
]

[szykov]

@michael-ciniawsky it worked, thanks. 👍

[cordoval]

@michael-ciniawsky is there a way to disappear that postcss.config.js and push it into the webpack.config.js file? sorry to abuse you on this one 👴

[michael-ciniawsky]

webpack.config.js

ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: [ 
     { 
       loader: 'css-loader', 
       options: { importLoaders: 1 } 
     }, 
     { 
        loader: 'postcss-loader', 
        options: {
          ident: 'postcss',
          plugins: () => [ require('autoprefixer')({...options}) ]
        }
     }
   ]
 })

[cordoval]

👍

[rouberg]

I find the real reason of no prefix, it's not the problem of extract-text-webpack-plugin. when build we use optimize-css-assets-webpack-plugin normally, optimize-css-assets-webpack-plugin use cssnano as default processor, and cssnano removed all prefix, so autoprefixer seemed not work in production.
we can config like this:

new OptimizeCssAssetsPlugin({
    cssProcessorOptions: {
      safe: true,
      autoprefixer: { disable: true },
      discardComments: {
        removeAll: true
      }
    }
  });

the option of autoprefixer: { disable: true } will disable cssnano's autoprefixer and saved prefixer that already exist by ourselves.

also see the issue optimize-css-assets-webpack-plugin/issues/51

maybe some brother need this so I copy and attach this although this issue closed a long time ago.