Html 如何停止Webpack-3'；什么是从清洁到清洁？ 问题

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

发展

戳

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

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

迄今为止的研究 更新2017-08-21： 在生产版本中，以下类缺少css

• 副标题
  标题：非（.is spaced）+副标题{ 最高保证金：-1.5雷姆； }

• 纵队
  @介质屏幕和（最小宽度：769px），打印 .列：不是（.is desktop）{ 显示器：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.

---

问题真的来自Purifycsplugin正在解决的问题

作为一个快速解决方案，您必须将

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*' ]
        }
    })