PostCSS and autoprefixing (postcss-loader)

Version: 5.1
Edit this page

Warning: You are browsing the documentation for Symfony 5.1, which is no longer maintained.

Read the updated version of this page for Symfony 5.3 (the current stable version).

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
// webpack.config.js

Encore
    // ...
+     .enablePostCssLoader((options) => {
+         options.config = {
+             // the directory where the postcss.config.js file is stored
+             path: 'path/to/config'
+         };
+     })
;

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.