How to add autoprefixer in webpack
Firstly we need to add this to our project using yarn/npm.
So yarn add autoprefixer
.
After a successful installation, we need to declare which browsers we wanna use for our autoprefixer.
To declare that, we need to add to our packages.json
file a few lines:
“browserslist”: [
“> 1%“,
“last 2 versions”
],
here, we can set something else (https://github.com/browserslist/browserslist#queries)
After that, we need to configure the webpack config file (ie. webpack.config.js
).
Firstly we require autoprefixer and we’re setting this as a variable (somewhere on the beginning of the file)
const autoprefixer = require('autoprefixer');
!important:
| We need to add postcss-loader
loader between css-loader
and sass-loader
.
use: ['css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
},
'sass-loader'],
if we have more loaders it could look like that:
module: {
rules: [
{
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()]
}
},
'sass-loader'],
}),
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'],
}),
},
{
test: /\.js/,
use: ['babel-loader?cacheDirectory'],
exclude: /node_modules/,
},
],
},
Now, we need to restart the server and you can enjoy working autoprefixer :)
Tweet