我们正在使用este.js dev stack在我们的应用程序中,它使用 webpack 来捆绑 JS 和 CSS 资源。网络包 is configured在构建生产环境和 stylus-loader 时使用 webpack.optimize.UglifyJsPlugin 以及生产环境的确切加载器配置。如下:
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';
我要疯了。尝试了许多不同的解决方案,但没有一个真正有效。
最佳答案
原来这是一个fresh new feature当时最新的 css-loader 0.15.1 但在使用多个单独的 CSS 文件时它无法正常工作。可以是turned off现在从 0.15.2 开始。
关于webpack - 将 WebPack 的 css-loader 与 UglifyJS 插件一起使用时,CSS 关键帧动画损坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31070033/