PostCSS and autoprefixing (postcss-loader) with Webpack Encore
Edit this pagePostCSS and autoprefixing (postcss-loader) with Webpack Encore
PostCSS is a CSS post-processing tool that can transform your CSS in a lot of cool ways, like autoprefixing, linting and more!
First enable it in webpack.config.js:
1 2 3 4 5 6
// webpack.config.js
Encore
// ...
+ .enablePostCssLoader()
;Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!
Next, download any plugins you want, like autoprefixer:
1 2 3 4 5
# if you use the Yarn package manager
$ yarn add autoprefixer --dev
# if you use the npm package manager
$ npm install autoprefixer --save-devNext, create a postcss.config.js file at the root of your project:
1 2 3 4 5 6 7 8 9
module.exports = {
plugins: {
// include whatever plugins you want
// but make sure you install these via yarn or npm!
// add browserslist config to package.json (see below)
autoprefixer: {}
}
}That's it! The postcss-loader will now be used for all CSS, Sass, etc files.
You can also pass options to the postcss-loader by passing a callback:
1 2 3 4 5 6 7 8 9 10 11 12
// webpack.config.js
+ const path = require('path');
Encore
// ...
+ .enablePostCssLoader((options) => {
+ options.postcssOptions = {
+ // the directory where the postcss.config.js file is stored
+ config: path.resolve(__dirname, 'sub-dir', 'custom.config.js'),
+ };
+ })
;Adding browserslist to package.json
The autoprefixer (and many other tools) need to know what browsers you want to
support. The best-practice is to configure this directly in your package.json
(so that all the tools can read this):
1 2 3 4 5
{
+ "browserslist": [
+ "defaults"
+ ]
}The defaults option is recommended for most users and would be equivalent
to the following browserslist:
1 2 3 4 5 6 7 8
{
+ "browserslist": [
+ "> 0.5%",
+ "last 2 versions",
+ "Firefox ESR",
+ "not dead"
+ ]
}See browserslist for more details on the syntax.
