You are browsing the Symfony 4 documentation, which changes significantly from Symfony 3.x. If your app doesn't use Symfony 4 yet, browse the Symfony 3.4 documentation.

PostCSS and autoprefixing (postcss-loader)

4.2 version

Maintained

3.4 4.3 master

Unmaintained

3.3 4.0 4.1

edit this page

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:

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!

// 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:

// 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):

{
+  "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.