5

我们在我们的应用程序中使用este.js 开发堆栈，它使用 webpack 来捆绑 JS 和 CSS 资产。Webpack配置为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 缩小css-clean），并且您可以推断出fadeIn覆盖arrowBounce，因为缩小后的名称相同且优先级更高。

文件components/component1.styl和components/component2.styl被包含在他们的 React 组件文件[name].react.js中使用语句：

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

我要疯了。尝试了许多不同的解决方案，但没有一个真正奏效。

4

1 回答 1

2

原来这是当时最新的 css-loader 0.15.1 的一项新功能，但在使用多个单独的 CSS 文件时它不能正常工作。现在可以从0.15.2关闭它。

于 2015-07-15T12:47:23.897 回答