tools that make it easier to use postcss plugins with webpack's css-loader
webpack's css-loader
is a great way to include css your
frontend builds because it treats every css file as a separate webpack module
in the dependency graph. this means:
- you only include the css you want
- it resolves
@import
statements just likerequire()
calls in js (i.e. by finding packages innode_modules
) - you can make css-only npm packages (like suitcss)
the downside is things like variable resolution get tricky (more on that here).
these tools give you the full power of webpack's dependency management without sacrificing must-have css features.
check out the examples directory to see it working. the webpack config looks something like this:
var join = require('path').join;
var webpackPostcssTools = require('webpack-postcss-tools');
var map = webpackPostcssTools.makeVarMap('src/index.css');
module.exports = {
entry: './src/index',
resolve: {
// this is important if, like SUIT CSS, you specify a `style` property in
// the package.json
packageMains: ['webpack', 'browser', 'web', 'style', 'main']
},
output: {
path: join(__dirname, 'dist'),
filename: 'index.[hash].js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css?importLoaders=1!postcss'},
{
test: /\.((png)|(eot)|(woff)|(ttf)|(svg)|(gif))$/,
loader: 'file?name=/[hash].[ext]'
}
]
},
postcss: [
webpackPostcssTools.prependTildesToImports,
require('postcss-custom-properties')({
variables: map.vars
}),
require('postcss-custom-media')({
extensions: map.media
}),
require('postcss-calc')()
]
};