WebPack стиль-погрузчик - импорт различных стилей на реагирующих компонентов без перекрывая

Question

У меня есть 2 Реагировать компоненты, которые требуют стили внутри:

список продуктов:

import './list.css'; 
import React from 'react'; 

export default class List extends React.Component { 
    ... 
} 

Детали продукта:

import './details.css'; 
import React from 'react'; 

export default class Details extends React.Component { 
    ... 
} 

И они имеют разные стили, которые переопределяют друг друга, для простоты позволяют предположить, что это background-color недвижимость на body:

list.css

body { 
    background-color: #ddd; 
} 

details.css

body { 
    background-color: #f80; 
} 

Что на самом деле происходит - стили хранятся на странице для обоих элементов, когда в комплекте по стилю погрузчиком WebPack в:

<style type="text/css"> 
body { 
    background-color: #ddd; 
} 
body { 
    background-color: #f80; 
} 
</style> 

Конфигурация webpack для погрузчика:

... 
{ 
    test: /\.css$/, 
    loader: 'style?singleton!css!cssnext' 
} 

Это означает, что стиль детали также активен на странице списка. Какова лучшая стратегия, чтобы держать их по-другому? Есть ли способ заменить стили?

Answer 1

Если вы используете загрузчик стиля. вы можете использовать полезный api, который они предоставляют. Вы можете прочитать об этом here.

Все конфликтующие css можно поместить в .useable.css и создать еще один загрузчик для этих файлов, используя пригодный для использования api.

{ 
    module: { 
    loaders: [ 
     { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" }, 
     { test: /\.useable\.css$/, loader: "style/useable!css" } 
    ] 
    } 
} 

Надеюсь, это поможет.

Answer 2

использование isomorphic-style-loader вместо стиля-загрузчика. Он будет пронумеровать ваши имена классов с именем компонента и сохранить стили уникальными. Таким образом, можно сохранить композитность, уникальность и критические стили. Подробнее об этом: https://github.com/kriasoft/isomorphic-style-loader