Reputation: 701
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
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 aftercss-loader
andstyle-loader
, but before other preprocessor loaders like e.gsass|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
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
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
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