Как правильно работать/подключать sass/css в React.js?

Question

[Behel]

Здравствуйте.

Решил попробовать сделать что-нибудь на react.js. Сразу возникла задача как правильно работать со стилями?

• Как их подключать чтобы была модульность, допустим, если компонент не используется, то и стиль соответствующий не подгружается;
  
• Чтобы подгружался некий стиль main.css в котором указаны переменные для стилей компонентов;
  
• Чтобы не было проблем с повторением классов и т.д.;
  
• Возможно еще есть очевидные вещи до которых я еще не дошел.
  

Answer 1

[Денис Инешин]

Со стилями так сильно заморачиваться не нужно. Достаточно всё минифицировать в 1 файл, сжать и подгрузить 1-им запросом. Если всё же очень хочется, то так умеет делать Webpack

Comments

[Behel]

А сами стили у вас лежат рядом с компонентами и вы чтобы не запутаться как-то их унифицируете?

[Денис Инешин]

Behel: до сборки конечно лежат рядом, но при сборке обычно собираю всё в один файл.

Answer 2

[Никита Гущин]

Попробуйте style-loader:

import styles from 'styles.less';
...
componentDidMount() {
  styles.use();
}

componentWillUnmount() {
  styles.unuse();
}

Тогда стили будут добавляться на страницу, когда компонент будет установлен. Но мне как-то не особо такой подход нравится и я просто делаю файл styles.less куда импортирую все нужные мне стили компонентов. И у меня на роут 'GET /styles.css' стоит обработчик, который отдает скомпиленный styles.less

Аналогичное решение будет и для sass\postCss ...

Comments

[Behel]

Почему вам не нравится подход с добавление стилей вместе с компонентом? Есть какой-то минус?

[Никита Гущин]

Behel: Это не нужно особо -> лишнее усложнение. Стили всё-равно уже будут загружены, а используются они, или нет - какая разница?