如何阻止 Webpack-3 的 PurifyCSSPlugin 清理太多？

Question

问题

其他条件相同，我的最终页面在 CSS 结果上有所不同。 prod 版本缺少正确的 flexbox 对齐方式，如下面的比较所示：

开发

产品

问题是由 PurifyCSS插件引起的。我不知道如何配置它仍然清理 css 的正确部分，保留我真正需要的部分？

如有任何帮助，我们将不胜感激。完整代码可用 here.

目前研究

2017-08-21 更新：

在生产版本中缺少 css 以下类

副标题

title:not(.is-spaced) + .subtitle { margin-top：-1.5rem； }
列

@media 屏幕和 (min-width: 769px), 打印 .columns:not(.is-desktop) { 显示：弹性； }

设置

我将 webpack-3 与 bulma to make a webpage 一起使用。我定义了两个脚本任务来构建我的应用程序 1. 在开发中和 2. 用于生产。

"dev": "webpack-dev-server --progress --colors",
"prod": "npm run clean && NODE_ENV=prod webpack -p",

在我的 webpack 配置中，我根据 NODE_ENV 变量在 css 处理的两个配置之间切换。配置如下所示：

const cssConfigEnvironments = {
    'dev': ['style-loader', 'css-loader?sourceMap', 'sass-loader'],
    'prod': ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
    })
}

此外，我禁用了用于开发的 ExtractTextPlugin。

    new ExtractTextPlugin({                                                                 // Builds .css, see https://github.com/webpack-contrib/extract-text-webpack-plugin
        filename: '[name].css',
        allChunks: true,
        disable: !envIsProd
    }),

控制台中显示的唯一值得注意的信息是以下弃用警告：

(node:2275) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

Answer 1

问题确实来自 PurifyCSSPlugin，an issue already open 正在解决它。

作为快速修复，您必须将 not 标签列入白名单：

    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        minimize: envIsProd,
        purifyOptions: {
          info: true,
          whitelist: [ '*:not*' ]
        }
    })

如何阻止 Webpack-3 的 PurifyCSSPlugin 清理太多？

How to stop Webpack-3's PurifyCSSPlugin from cleaning to much?

html

css

bulma

purifycss

webpack-3

问题

开发

产品

目前研究

2017-08-21 更新：

设置