From 114db125074a80db436c25323683c94f5d7aa741 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Sat, 4 Aug 2018 16:27:09 +0200 Subject: [PATCH] docs(README): add autoprefixing example (#380) --- README.md | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6a25d4f1..f7546968 100644 --- a/README.md +++ b/README.md @@ -179,7 +179,7 @@ module.exports = ({ file, options, env }) => ({ parser: file.extname === '.sss' ? 'sugarss' : false, plugins: { 'postcss-import': { root: file.dirname }, - 'postcss-preset-env': options.presetEnv ? options.presetEnv : false, + 'postcss-preset-env': options['postcss-preset-env'] ? options['postcss-preset-env'] : false, 'cssnano': env === 'production' ? options.cssnano : false } }) @@ -192,9 +192,8 @@ module.exports = ({ file, options, env }) => ({ options: { config: { ctx: { - cssnext: {...options}, + 'postcss-preset-env': {...options}, cssnano: {...options}, - autoprefixer: {...options} } } } @@ -212,7 +211,6 @@ module.exports = ({ file, options, env }) => ({ plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('postcss-preset-env')(), - require('autoprefixer')(), require('cssnano')() ] } @@ -332,6 +330,31 @@ within the CSS directly as an annotation comment. } ``` +### Autoprefixing + +**webpack.config.js** +```js +{ + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'postcss-loader', + options: { + ident: 'postcss', + plugins: [ + require('autoprefixer')({...options}), + ..., + ] + } + } + ] +} +``` + +> :warning: [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. + ### `CSS Modules` This loader [cannot be used] with [CSS Modules] out of the box due