postcss-loader: Not getting autoprefixer to work with extract-text-webpack-plugin

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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

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

+11

michael-ciniawsky on Feb 9, 2017

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

michael-ciniawsky on Jul 4, 2017

Thanks @JounQin and @badtant ! Both works!

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

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

hugojing on Nov 14, 2016

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

badtant on Oct 21, 2016

@michael-ciniawsky it worked, thanks. 👍

szykov on Feb 10, 2017

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

minification

JounQin on Jul 26, 2016

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.

rouberg on Nov 16, 2018