PostCSS and autoprefixing (postcss-loader)
PostCSS and autoprefixing (postcss-loader)¶
PostCSS is a CSS post-processing tool that can transform your CSS in a lot of cool ways, like autoprefixing, linting and more!
First, download postcss-loader and any plugins you want, like autoprefixer:
1 | $ yarn add postcss-loader autoprefixer --dev
|
Next, 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: {}
}
}
|
Then, enable the loader in Encore!
1 2 3 4 5 6 | // webpack.config.js
Encore
// ...
+ .enablePostCssLoader()
;
|
Because you just modified webpack.config.js, stop and restart Encore.
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.
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.