@@ -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
3638 That's it! The ``postcss-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+ See `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