Animazioni di fotogrammi chiave CSS interrotte quando si utilizza il css-loader di WebPack con il plugin UglifyJS

Question

Nella nostra applicazione utilizziamo il pacchetto web che utilizza il pacchetto Web per raggruppare le risorse CSS di JS &. Webpack is configured per utilizzare webpack.optimize.UglifyJsPlugin durante la creazione per la produzione env e stylus-loader, anche la configurazione esatta del caricatore per la produzione env. è il seguente:

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

Poi ho 3 file 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 

Dopo la compilazione di produzione, sia le animazioni dei fotogrammi chiave vengono rinominati per a (probabilmente alcuni minification CSS css-clean) e, come si può dedurre fadeIn esegue l'override arrowBounce a causa dello stesso nome e priorità più alta dopo il min.

file components/component1.styl e components/component2.styl vengono inclusi nei loro Reagire file del componente [name].react.js utilizzando le istruzioni:

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

vado dadi. Ho provato molte soluzioni diverse ma nessuna ha funzionato davvero.

Answer 1

È risultato essere un fresh new feature di css-loader 0.15.1, ma non ha funzionato correttamente quando si utilizzano più file CSS separati. Ora può essere turned off a partire da 0.15.2.