5

私たちは、 webpackを使用して JS および CSS アセットをバンドルするアプリケーションで este.js 開発スタックを使用しています。Webpackはwebpack.optimize.UglifyJsPlugin、本番環境用にビルドするときに使用するように構成されておりstylus-loader、本番環境用の正確なローダー構成です。以下のとおりであります：

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

次に、3 つの styl ファイルがあります。

// 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を推測できます。fadeInarrowBounce

ファイルはcomponents/component1.styl、次のステートメントを使用components/component2.stylして React コンポーネント ファイルに含まれています。[name].react.js

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

私は気が狂います。多くの異なる解決策を試しましたが、実際に機能するものはありませんでした。

4

1 に答える 1