PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.
Set postcss section in webpack config:
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [autoprefixer, precss];
}
}Now your CSS files requirements will be processed by selected PostCSS plugins:
var css = require('./file.css');
// => CSS after Autoprefixer and CSSWringNote that the context of this function
module.exports = {
...
postcss: function () {
return [autoprefixer, precss];
}
}will be set to the webpack loader-context. If there is the need, this will let you access to webpack loaders API.
If 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: function () {
return {
defaults: [autoprefixer, precss],
cleaner: [autoprefixer({ browsers: [] })]
};
}
}When using postcss-import plugin, you may want to tell webpack about
dependencies coming from your @import directives.
For example: in watch mode, to enable recompile on change.
Here is a simple way to let know postcss-import to pass files to webpack:
var postcssImport = require('postcss-import');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function (webpack) {
return [
postcssImport({
addDependencyTo: webpack
})
];
}
}PostCSS can transforms styles in any syntax, not only in CSS. There are 3 parameters to control syntax:
syntaxaccepts module name withparseandstringifyfunction.parseraccepts module name with input parser function.stringifieraccepts module name with output stringifier function.
For example, you can use Safe Parser to find and fix any CSS errors:
var css = require('postcss?parser=postcss-safe-parser!./broken')