2

我正在通过 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 选项。

关于为什么空类不存在的任何想法?

4

0 回答 0