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:

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

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

// webpack.config.js

Encore
    // ...
+     .enablePostCssLoader((options) => {
+         options.config = {
+             path: 'config/postcss.config.js'
+         };
+     })
;

1
2
3

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