css autoprefixer with webpack

Question

I have been trying to configure webpack with LESS and Autoprefixer, but autoprefixer does not seem to work. My css or less files are not autoprefixed. Example: display: flex stays display: flex

I have put my webpack config below:

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};

score 18 · Answer 1 · edited Jun 20 '20 at 09:12

As written in Autoprefixer documentation, "Autoprefixer uses Browserslist"

As per the Browserslist documentation, it is recommended to place the browserslist in package.json.

So here is another way to use autoprefixer with webpack:

install postcss-loader and autoprefixer:

npm i -D postcss-loader autoprefixer

webpack.config.js

module: {
  rules: [
    {
      test: /\.scss$/,
      exclude: /node_modules/, 
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    },
    { 
      test: /\.css$/, 
      use: ['style-loader', 'css-loader', 'postcss-loader'] 
    },
    ...
  ]
}

As per postcss documentation, the postcss-loader should be placed after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

package.json

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]

In this way, you don't need a postcss.config.js file.

looks like you need another package to not use a postcss.config.js file like that: https://github.com/postcss/postcss-loader/issues/252#issuecomment-306933122 — Nick Brady, Nov 30 '18 at 12:01
Thank you for the excellent explanation _and_ for taking time to provide the links to the documentation! — benwsmith, Sep 09 '19 at 23:12

wrick17 · Accepted Answer · 2017-02-16T17:11:02.703

So found the problem. Silly me, the postcss block needs to be directly under the webpack config, I had put it in modules block. My Bad.

EDIT: this is how it should have been:

var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};

So instead of putting it inside the modules block, I had to put it directly under the main block as shown above.

score 4 · Answer 3 · answered Jun 24 '16 at 10:44

4

You will need to set up postcss in your webpack config for older browser versions.

Default for autoprefixer is last 2 versions of browsers or browsers that have at least 5% market share.

https://github.com/postcss/autoprefixer#browsers

  postcss: [
    autoprefixer({
      browsers: ['last 3 versions', '> 1%']
    })
  ],

It says that you are supporting last 3 versions of browsers or browsers that have at least 1% market share.

answered Jun 24 '16 at 10:44

Marcel Mandatory

1,447
13
25

it's not thorwing any errors `Hash: d630b9d8e940465f3b07 Version: webpack 1.13.1 Time: 1772ms Asset Size Chunks Chunk Names bundle.js 708 kB 0 [emitted] bundle bundle.js.map 816 kB 0 [emitted] bundle + 171 hidden modules` – wrick17 Jun 24 '16 at 13:36
I think it's worth saying that webpack 2 no longer allows custom properties in configuration. – theFreedomBanana Jun 06 '17 at 10:22

score 1 · Answer 4 · answered Jun 06 '17 at 13:08

I was having a similar issue with Webpack 2.x.x and custom properties are no longer allowed in configuration. I found a solution on this other S.O post: Using auto prefixer with postcss in webpack 2.0. In case for some unknown reason this link would lead to a 404 I compile the most relevant answers here:

Webpack 2.x.x introduced webpack.LoaderOptionsPlugin() plugin where you need to define all the loader option plugins. Like, autoprefixer is a plugin for postcss-loader. So, it has to go here. New config should look like this:

module: {
  rules: [
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader', 
      'postcss-loader']
    }
  ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
    }
  })
],

This worked for me, but as mentioned by Kreig there is no need for LoaderOptionsPlugin(). You can now 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...*/
       ]
    }]
  }         
}
/*...*/

Thing is I've tried the 2nd with Webpack 2.5.1 but it failed. Credits goes to Pranesh Ravi and Kreig.

css autoprefixer with webpack

4 Answers4