Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • SensioLabs Professional services to help you with Symfony
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by
  1. Home
  2. Documentation
  3. Frontend
  4. PostCSS and autoprefixing (postcss-loader)
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud
  • Adding browserslist to package.json

PostCSS and autoprefixing (postcss-loader)

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 enable it in webpack.config.js:

1
2
3
4
5
6
// webpack.config.js

  Encore
      // ...
+     .enablePostCssLoader()
  ;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

Next, download any plugins you want, like autoprefixer:

1
2
3
4
5
# if you use the Yarn package manager
$ yarn add autoprefixer --dev

# if you use the npm package manager
$ npm install autoprefixer --save-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: {}
    }
}

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.
TOC
    Version
    Version:

    Symfony 7.0 is backed by

    Symfony 7.0 is backed by

    Make sure your project is risk free

    Make sure your project is risk free

    Be trained by SensioLabs experts (2 to 6 day sessions -- French or English).

    Be trained by SensioLabs experts (2 to 6 day sessions -- French or English).

    Symfony footer

    Avatar of Nicolas Dievart, a Symfony contributor

    Thanks Nicolas Dievart (@youri) for being a Symfony contributor

    2 commits • 6 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony