我正在通过 Webpack 2 构建一个 React 应用程序,通过 SASS-loader 和 CSS-loader 生成 CSS。这是我的 Webpack 2 配置:
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'
}
],
})
},
[...]
]
我正在将生成的 CSS 写入文件,同时允许我的 React 应用程序在 Javascript 对象中获取生成的类名,以分配给各种 HTML 元素。
我看到的一个怪癖是没有保留空类(不包含实际样式的类选择器),并且在生成时从类列表中丢弃。我读过 CSS-loader 使用 CSSNano,它的配置默认通过缩小删除未使用/空的类。
根据 CSS-Loader 的文档,您可以通过选项设置 CSSNanominimize
选项。这就是为什么我根据 CSSNano 的选项文档将 safe 设置为 true 的原因。
不幸的是,仍然没有保留空/未使用的类。我想知道我是否正确地通过了 CSSNano 选项。
关于为什么空类不存在的任何想法?