PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.
Set postcss section in webpack config:
var autoprefixer = require('autoprefixer-core');
var csswring = require('csswring');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: [autoprefixer, csswring]
}Now your CSS files requirements will be processed by selected PostCSS plugins:
var css = require('./file.css');
// => CSS after Autoprefixer and CSSWringIf you want to process different styles by different PostCSS plugins you can
define plugin packs in postcss section and use them by ?pack=name parameter.
module.exports = {
module: {
loaders: [
{
test: /\.docs\.css$/,
loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: {
defaults: [autoprefixer, csswring],
cleaner: [autoprefixer({ browsers: [] })]
}
}If you add ?safe=1 to requirement, PostCSS will try to correct any syntax
error that it finds in the CSS. For example, it will parse a { as a {}.
var css = require('postcss?safe=1!./broken')