I am building a React application through Webpack 2, generating CSS through SASS-loader and CSS-loader. Here is my Webpack 2 configuration:
loaders: [
{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoader: 1,
camelCase: true,
localIdentName: '[local]',
minimize: {
safe: true,
},
}
},
{
loader: 'sass-loader'
}
],
})
},
[...]
]
I am writing the resulting CSS to file, while allowing my React application to get the resulting class names in a Javascript object to assign to various HTML elements.
One quirk I've seen is that empty classes (class selectors containing no actual styles) are not being kept, and are discarded from the class list on generation. I have read that CSS-loader uses CSSNano, whose configuration by default removes unused/empty classes through minification.
As per CSS-Loader's documentation, you can set CSSNano options through the minimize
option. That is why I have set safe as true, as per CSSNano's options documentation.
Unfortunately, empty/unused classes are still not being kept. I am wondering if I'm properly passing the CSSNano option through.
Any thoughts on why empty classes aren't persisting?