将 WebPack 的 css-loader 与 UglifyJS 插件一起使用时 CSS 关键帧动画损坏

Question

我们在构建生产环境时使用 este.js dev stack in our application which uses webpack to bundle JS & CSS assets. Webpack is configured 来使用 webpack.optimize.UglifyJsPlugin 和 stylus-loader，以及生产环境的确切加载程序配置。如下：

ExtractTextPlugin.extract(
  'style-loader', 
  'css-loader!stylus-loader'
);

然后我有 3 个样式文件：

// app/animations.styl
@keyframes arrowBounce
  0%
    transform translateY(-20px)
  50%
    transform translateY(-10px)
  100%
    transform translateY(-20px)

@keyframes fadeIn
  0%
    opacity 0
  50%
    opacity 0
  100%
    opacity 1

// components/component1.styl
@require '../app/animations'

.component1
  &.-animated
    animation arrowBounce 2.5s infinite

// components/component2.styl
@require '../app/animations'

.component2
  &.-visible
    animation fadeIn 2s

制作完成后，两个关键帧动画都重命名为 a（可能 css-clean 缩小了一些 CSS）并且您可以推断 fadeIn 覆盖 arrowBounce 因为同名且缩小后优先级更高。

文件 components/component1.styl 和 components/component2.styl 正在使用以下语句包含在其 React 组件文件 [name].react.js 中：

import 'components/component1.styl'; 
import 'components/component2.styl';

我要疯了。尝试了许多不同的解决方案，但 none 确实有效。

Answer 1

从 0.15.2 开始，它现在是 fresh new feature of at that time the latest css-loader 0.15.1 but it didn't work correctly when using multiple separate CSS files. It can be turned off。

将 WebPack 的 css-loader 与 UglifyJS 插件一起使用时 CSS 关键帧动画损坏

Broken CSS keyframe animations when using WebPack's css-loader with UglifyJS plugin

webpack

webpack-style-loader

clean-css