Hoạt ảnh khung chính CSS bị hỏng khi sử dụng trình tải css của WebPack với plugin UglifyJS

Question

Chúng tôi đang sử dụng este.js dev stack trong ứng dụng của chúng tôi sử dụng gói webpack để đóng gói tài sản CSS JS &. Webpack is configured để sử dụng webpack.optimize.UglifyJsPlugin khi xây dựng cho env sản xuất và stylus-loader, cũng là cấu hình bộ tải chính xác cho env sản xuất. được như sau:

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

sau đó tôi có 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 

Sau khi xây dựng sản xuất, cả hai hình ảnh động keyframe được đổi tên thành a (có thể là một số việc rút gọn CSS bởi css-clean) và như bạn có thể suy ra fadeIn ghi đè arrowBounce vì cùng tên và ưu tiên cao hơn sau khi rút gọn.

tập tin components/component1.styl và components/component2.styl đang được bao gồm trong họ Phản ứng tập tin thành phần [name].react.js sử dụng báo cáo:

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

tôi sẽ loại hạt. Đã thử nhiều giải pháp khác nhau nhưng không có giải pháp nào thực sự hiệu quả.

Answer 1

Đã tắt nó là fresh new feature vào thời điểm đó trình tải lên css mới nhất 0,15,1 nhưng nó không hoạt động chính xác khi sử dụng nhiều tệp CSS riêng biệt. Nó có thể là turned off bây giờ là 0.15.2.