Почему стили из подключенного модуля scss в index.js не отображаются при стилизации компонента React?

Как я могу исправить ошибку в моем коде React, которая говорит о том, что переменная не существует при попытке стилизировать компонент? В моем проекте есть файл style.scss, в который ипортируются _vars, _generics, _fonts, _mixins. style.scss импортируется в index.js, причем пути верные, так как generics и mixins работают нормально. Однако, если импортировать переменные напрямую в файл компонента, то ошибка исчезает, но это импровизация.
  • 13 апреля 2024 г. 13:49
Ответы на вопрос 2
Это может быть связано с тем, что переменные в файлах _vars, _generics, _fonts, _mixins не доступны напрямую из компонентов React из-за ограничений области видимости в Sass. 

Чтобы исправить эту проблему, вам следует объявить переменные в файлах _vars, _generics, _fonts, _mixins с использованием ключевого слова `$`, чтобы они могли быть доступны в других файлах scss. Например:

_vars.scss:
```scss
$primary-color: #ff0000;
```

Затем в style.scss вы должны импортировать _vars.scss перед импортом других файлов:

style.scss:
```scss
@import 'vars';
@import 'generics';
@import 'fonts';
@import 'mixins';
```

Теперь переменные должны быть доступны в ваших компонентах React, если вы импортируете style.scss в index.js. В случае, если проблема сохраняется, попробуйте перезапустить сервер разработки (например, командой `npm start`) после внесения изменений в стили.
А код ошибки можете написать? Непонятно просто, про какую переменную ругается сборщик, про SCSS или JS. А ещё, насколько я знаю, для подключения модулем файл должен называться style.module.scss
Похожие вопросы