Using autoprefixer with postcss in webpack 2.x

Question

How to use autoprefixer with webpack 2.x.

Previously, it used to be something like this...

...  module: {   loaders: [      {        test: /\.scss$/,         loader: 'style!css!sass!postcss'      }    ] }, postcss: () => {   return [autoprefixer] },  ... 

But, it's not working anymore.

How to rewrite it to [email protected]?

Answer 1

There is no more need to use LoaderOptionsPlugin. Now you can pass options directly to the loader declaration.

const autoprefixer = require('autoprefixer');  let settings = {     /*...*/     module: {         rules: [{             test: /\.css$/,             use: [                 /*...other loaders...*/                 {                     loader: 'postcss-loader',                     options: {                         plugins: function () {                             return [autoprefixer]                         }                     }                 }                 /*...other loaders...*/             ]         }]}              }     /*...*/ }; 

In case if you need to provide specific compatibility configuration, you can pass it as argument to autoprefixer function:

options: {     plugins: function () {         return [autoprefixer('last 2 versions', 'ie 10')]     } }