Как подключить главные файлы стилей для разроботки, чтоб каждый раз не импортировать их в другие sass файлы?

Question

[Cyberial Syntwaiser]

Я возле каждого компонента прописываю sass,scss стили, и получается что нужно для каждого файла подключать мои @mixin и переменные в виде - $fz50h: 50px; которые лежат в отдельном файле, как подключить это для проэкта? Чтоб в каждом файле стилей не прописывать подобную конструкцию?

@import '../../css/base/typography'
@import '../../css/base/mixin'

Answer 1

[Сергей delphinpro]

Вот здесь я показывал, как это делается в Vue. VueJS: где лучше хранить css, в компонентах .vue или main.css?
Так как вся суть в настройке webpack лоадера, то и к реакту можно прикрутить

Answer 2

[natalia1satsyuk]

Файлы с основными стилями поместите в папочку, например, "base";
Файлы с остальными стилями (модули, компоненты) поместите в другую папочку, например, "other";
И на одном уровне с этими папочками создайте файл, например style.scss, куда импортируйте главный style.scss с папки base и главный style.scss с папки other.

Comments

[Cyberial Syntwaiser]

Спасибо за ответ! Наталья :)))

Answer 3

[McBernar]

В app.js

Comments

[Cyberial Syntwaiser]

Пробовал подключать в App.js главный main.sass файл, в котором подключены миксины, боди стайлы, и переменные sass, но не сработало, так же подключал отдельно sass файлы в App.js