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.1 version

Maintained

3.4 4.2 master

Unmaintained

3.3 4.0

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 --dev postcss-loader autoprefixer

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()
;

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 = {
+             path: 'config/postcss.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):

{
+     "browserslist": [ "last 2 versions", "ios >= 8" ]
}

See browserslist for more details on the syntax.

Note

Encore uses babel-preset-env, which also needs to know which browsers you want to support. But this does not read the browserslist config key. You must configure the browsers separately via configureBabel().

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.