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 need to link any of the postcss plugins to the webpack context, you can define a function that returns your plugins. The function is executed with the same context provided to postcss-loader, allowing access to webpack loader API
var cssimport = require('postcss-import');
var autoprefixer = require('autoprefixer-core');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
// The context of this function is the same provided to postcss-loader
// see: http://webpack.github.io/docs/loaders.html
return [
cssimport({
// see postcss-import docs to learn about onImport param
// https://github.com/postcss/postcss-import
onImport: function (files) {
files.forEach(this.addDependency);
}.bind(this)
}),
autoprefixer
];
}
}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')