Webpack 2 css-loader 在生产构建中替代 z-index 属性

Question

我在使用我们的应用程序的生产构建版本时遇到了奇怪的问题。我们正在使用与 webpack 捆绑在一起的 React。样式以 less 编写并打包以将 bundle.css 与 extract-text-plugin 分开。我的应用程序中到处都是 z-index 属性。问题是，在生产模式下，捆绑输出带有 z-index 属性替代值的样式。例如，z-index: 9999 将被转译为 z-index: 27。即使我输入 !important，结果也会变成 z-index: 27!important。我假设它是故意完成的，但是如果某些 z-index 属性设置为 jss，例如 "zIndex: 99"，我的主要 9999（配置为 less）将被 jss 内联样式重叠构建后保持不变。

Answer 1

在您的作品中，添加 safe 压缩：

new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true
  }
})

Webpack 2 css-loader 在生产构建中替代 z-index 属性

Webpack 2 css-loader substitutes z-index property in production build

z-index

less

webpack