@@ -18,6 +18,8 @@ Next, create a ``postcss.config.js`` file at the root of your project:
1818 plugins: {
1919 // include whatever plugins you want
2020 // but make sure you install these via yarn or npm!
21+
22+ // add browserslist config to package.json (see below)
2123 autoprefixer: {}
2224 }
2325 }
@@ -35,6 +37,29 @@ Then, Enable the loader in Encore!
3537
3638postcss-loader `` will now be used for all CSS, Sass, etc files.
3739
40+ Adding browserslist to package.json
41+ -----------------------------------
42+
43+ The ``autoprefixer `` (and many other tools) need to know what browsers you want to
44+ support. The best-practice is to configure this directly in your ``package.json ``
45+ (so that all the tools can read this):
46+
47+ .. code-block :: diff
48+
49+ {
50+ + "browserslist": [ "last 2 versions", "ios >= 8" ]
51+ }
52+
53+ browserslist `_ for more details on the syntax.
54+
55+ .. note ::
56+
57+ Encore uses `babel-preset-env `_, which *also * needs to know which browsers you
58+ want to support. But this does *not * read the ``browserslist `` config key. You
59+ must configure the browsers separately via :doc: `configureBabel() </frontend/encore/babel >`.
60+
3861.. _`PostCSS` : http://postcss.org/
3962.. _`autoprefixing` : https://github.com/postcss/autoprefixer
4063.. _`linting` : https://stylelint.io/
64+ .. _`browserslist` : https://github.com/ai/browserslist
65+ .. _`babel-preset-env` : https://github.com/babel/babel-preset-env
0 commit comments