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 SensioLabs
  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
    We stand with Ukraine.
    Version:

    Symfony 5.4 is backed by

    Take the exam at home

    Take the exam at home

    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

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of Kamil Pešek, a Symfony contributor

    Thanks Kamil Pešek (@kamil_pesek) for being a Symfony contributor

    2 commits • 22 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

    Search by Meilisearch