Импортированные стили в ReactJS

#css #reactjs

Делаю приложение на ReactJS.

Есть два "модуля" - Admin, Operator.

У каждого модуля свои стили. Есть конечно общие стили. С этим проблем нет.
Но вот есть стили которые относятся к модулю. 
Я их импортирую в компоненте страницы модуля (к примеру LoginPage), к примеру так:

import '../../style/page/auth/style.css';
import '../../style/page/auth/media.css';
import '../../style/page/auth/custom.css';


Но вот проблема в том что все стили, со всех страниц и модулей вставляются в head
страницы. И стили будут перебиваться.

Как это пофиксить? что бы в head вставлялись стили только для нужного модуля.

в index.js у меня есть роутер:


    
        
        
        
    


    

Ответы

Ответ 1

Никак. Вы правильно заметили что все стили при компиляции проекта созданного c помощью
create-react-app объединяются и помещаются в 

Следуйте каким-то конвенциям при написании стилей, например БЭМ чтобы избежать перезаписи
стилей.

Альтернативным решением является создание собственной кофигурации на Webpack, но
я бы не советовал такой подход, потому что в данном случае он является скорее "костылем"
нежели решением. create-react-app + конвенция для стилей = Best Practice