Skip to content

Commit

Permalink
docs(README): add autoprefixing example (#380)
Browse files Browse the repository at this point in the history
  • Loading branch information
halfzebra authored and michael-ciniawsky committed Aug 4, 2018
1 parent 8772814 commit 114db12
Showing 1 changed file with 27 additions and 4 deletions.
31 changes: 27 additions & 4 deletions README.md
Expand Up @@ -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
}
})
Expand All @@ -192,9 +192,8 @@ module.exports = ({ file, options, env }) => ({
options: {
config: {
ctx: {
cssnext: {...options},
'postcss-preset-env': {...options},
cssnano: {...options},
autoprefixer: {...options}
}
}
}
Expand All @@ -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')()
]
}
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 114db12

Please sign in to comment.