Связать @import (sass) и .module (react)?

Question

[TheSnegok]

Добрый день!
Вопрос есть ли смысл связывать модули React с импортами sass и возможно ли это вообще?
Или взять и к каждой компоненте сделать импорт модуля sass, но как тогда сделать переменные для всего проекта?
Или передавать всё в главный файл без использования модуля чтобы потом просто передавалось по ветке вниз и можно было просто использовать стили без модулей?
Интересно как это делают на больших проектах scss/sass + React с использованием модулей или нет, насколько я видел в простых лэндингах все стили, переменные, блоки импортируют в один main файл и потом бросают одним файлом.
P.S. Вот пришла идея бросать все переменные и глобальные стили без модульности в корень(index.js), а все остальные стили забрасывать в компоненты с помощью модульности, только вот не знаю будут ли работать переменные в этих модулях)

Answer 1

[Ilya Olovyannikov]

Привет!
В постскриптуме ты все правильно описал.

1. Берем styles.scss, туда импортируем наши commonStyles - переменные, миксины и прочее.
2. Этот файл подключаем в App или аналогичный компонент - все переменные станут доступными для использования.
3. К компоненте подключаем модульный файл стилей, используем миксины и переменные как обычно.
4. PROFIT!

Comments

[TheSnegok]

Спасибо, порадовали)

[TheSnegok]

подключил всё как и думал но модуль не видит переменную подскажите что не так пожалуйста! тык

[Ilya Olovyannikov]

TheSnegok, попробуй CSS custom properties

[TheSnegok]

Ilya Olovyannikov, Спасибо за ответ, попробую)
P.S. Спасибо большое, всё работает, думал в больших проектах использую предпроцессоры на максимум)
только теперь не знаю как с миксинами быть(

[Ilya Olovyannikov]

TheSnegok, мы используем scss по-максимуму.
В конфиг вебпака дописали sassOptions -> prependData и путь до файла с миксинами.