CODEWITHSUNDEEP
webpackautoprefixerpostcss
wrick17
wrick17

Reputation: 701

css autoprefixer with webpack

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',
  }
};

Upvotes: 22

Views: 42012

Answers (4)

antoni
antoni

Reputation: 5556

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.

Upvotes: 19

theFreedomBanana
theFreedomBanana

Reputation: 2630

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.

Upvotes: 1

wrick17
wrick17

Reputation: 701

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.

Upvotes: 7

Marcel Mandatory
Marcel Mandatory

Reputation: 1447

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.

Upvotes: 4

Related Questions