如何阻止Webpack-3的PurifyCSSPlugin从清洁到更多？

Question

问题

其他一切都是一样的，我的最后一个页面的CSS结果不同。prod版本缺乏正确的柔性盒对齐方式，如以下比较所示：

开发人员

​

​

戳

​

​

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

任何帮助都将不胜感激。完整的代码是可用的这里。

目前为止的研究

更新2017-08-21：

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

• 字幕 标题:not(..is spaced)+ .subtitle {边距-顶部：-1.5rem；}
• 列 @媒体屏幕和(最小宽度:769 min)，打印.columns:not(..is桌面){ display: flex；}

设置

我用webpack-3和大疱一起做网页.我定义了两个脚本任务来构建我的应用程序: 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，一个已经公开的问题正在解决这个问题。

作为快速修复，您必须将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*' ]
        }
    })