Uszkodzone animacje klatek kluczowych CSS podczas korzystania z programu css-loader programu WebPack z wtyczką UglifyJS

Question

Używamy aplikacji este.js dev stack w naszej aplikacji, która wykorzystuje pakiet sieci Web do pakowania zasobów CSS JS &. Webpack is configured używać webpack.optimize.UglifyJsPlugin podczas budowania dla env produkcji i stylus-loader, oraz dokładną konfigurację modułu ładującego dla środowiska produkcyjnego. przedstawia się następująco:

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

Mam następnie 3 pliki 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 

Po kompilacji produkcyjnej, zarówno klatek kluczowych animacje są przemianowany na a (prawdopodobnie niektóre CSS minifikacji przez css-clean) i jak można wywnioskować fadeIn przesłania arrowBounce z powodu tej samej nazwy i wyższego priorytetu po minifikacji.

Pliki components/component1.stylcomponents/component2.styl i są wliczone w ich reagują pliku komponentu [name].react.js korzystających stwierdzeń:

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

jadę orzechy. Próbowałem wielu różnych rozwiązań, ale żaden naprawdę nie działał.

Answer 1

Okazało się, że był to fresh new feature z tego czasu najnowszy program ładujący css 0.15.1, ale nie działał poprawnie podczas używania wielu oddzielnych plików CSS. Może być teraz turned off od 0.15.2.