UglifyJS प्लगइन

Question

के साथ वेबपैक के सीएसएस-लोडर का उपयोग करते समय टूटा हुआ सीएसएस कीफ्रेम एनीमेशन हम अपने आवेदन में este.js dev stack का उपयोग कर रहे हैं जो जेएस & सीएसएस संपत्तियों को बंडल करने के लिए वेबपैक का उपयोग करता है। वेबपैक is configured उत्पादन env और stylus-loader के लिए निर्माण करते समय webpack.optimize.UglifyJsPlugin का उपयोग करने के लिए, उत्पादन एनवी के लिए सटीक लोडर कॉन्फ़िगरेशन। इस प्रकार है:

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-clean से शायद कुछ सीएसएस minification) और आप अनुमान लगा सकते हैं के रूप में fadeIn खनन के बाद उसी नाम और उच्च प्राथमिकता के कारण arrowBounce ओवरराइड करता है।

फ़ाइलें components/component1.styl और components/component2.styl उनके घटक फ़ाइल [name].react.js प्रतिक्रिया बयानों का उपयोग कर में शामिल किया जा रहा है:

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

मैं पागल हो जा रहा हूँ। कई अलग-अलग समाधानों का प्रयास किया लेकिन वास्तव में कोई भी काम नहीं किया।

Answer 1

उस समय के नवीनतम सीएसएस-लोडर 0.15.1 के बाद यह fresh new feature था, लेकिन यह एकाधिक अलग-अलग सीएसएस फ़ाइलों का उपयोग करते समय सही ढंग से काम नहीं करता था। यह turned off अब 0.15.2 के रूप में हो सकता है।