PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.
npm install postcss-loader --save-devAdd PostCSS Loader to webpack.config.js. Put it after css-loader
and style-loader. But before sass-loader, if you use it.
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?importLoaders=1',
'postcss-loader'
]
}
]
}
}Then create postcss.config.js:
module.exports = {
plugins: [
require('postcss-smart-import')({ /* ...options */ }),
require('precss')({ /* ...options */ }),
require('autoprefixer')({ /* ...options */ })
]
}You could put different configs in different directories. For example,
global config in project/postcss.config.js and override its plugins
in project/src/legacy/postcss.config.js.
You can read more about common PostCSS config in postcss-load-config.
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.
module.exports = {
module: {
loaders: [
{
test: /\.sss/,
loaders: [
'style-loader',
'css-loader?importLoaders=1',
'postcss-loader?parser=sugarss'
]
}
]
}
}Loader will use source map settings from previous loader.
You can set this sourceMap parameter to inline value to put source maps
into CSS annotation comment:
module.exports = {
module: {
loaders: [
{
test: '\/.css',
loaders: [
'style-loader',
'css-loader?importLoaders=1',
'postcss-loader?sourceMap=inline'
]
}
]
}
}This loader cannot be used with CSS Modules out of the box due
to the way css-loader processes file imports. To make them work properly,
either add the css-loader’s importLoaders option
…
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'postcss-loader'
]
}
…or use postcss-modules plugin instead of css-loader.
If you want to process styles written in JavaScript you can use the postcss-js parser.
…
{
test: /\.style.js$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'postcss-loader?parser=postcss-js',
'babel'
]
}
…As result you will be able to write styles as:
import colors from './config/colors'
export default {
'.menu': {
color: colors.main,
height: 25,
'&_link': {
color: 'white'
}
}
}If you use JS styles without postcss-js parser, you can add exec parameter:
…
{
test: /\.style.xyz$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1',
'postcss-loader?parser=custom-parser&exec'
]
}
…PostCSS loader sends a loaded instance to PostCSS common config. You can use it to do some real magic:
module.exports = function (ctx) {
if (check(ctx.webpack.resourcePath)) {
return plugins1;
} else {
return plugins2;
}
}Webpack provides webpack plugin developers a convenient way to hook into the build pipeline. The postcss-loader makes use of this event system to allow building integrated postcss-webpack tools.
See the example implementation.
Event postcss-loader-before-processing is fired before processing and allows
to add or remove postcss plugins.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent