Вы когда-нибудь начинали писать веб-приложение с какой-нибудь причудливой ✨Javascript Framework✨ (например, React, Angular) и думали: «Эй, знаешь, что выведет стиль моего приложения на новый уровень? СКСС!» Итак, вы добавляете экземпляр sass-loader или node-sass и начинаете писать свои таблицы стилей.
Вы создаете файл Variables.scss для своих элементов темы (цвета, шрифты и т. д.), но затем понимаете, что хотите также использовать эти элементы темы в своем коде Javascript, поэтому копируете их в какой-нибудь файл Theme.js, и в итоге вы получаете кучу повторяющиеся определения, подобные этому:
Должен же быть более приятный способ сделать это правильно? Если я хочу изменить свои цвета/шрифты, я не хочу поддерживать обновления между несколькими файлами. Что ж, нам повезло! Мы можем закрепить эти определения с помощью Модулей SCSS. Эти файлы модулей позволяют явно экспортировать стили/переменные для использования как в файлах SCSS, так и в файлах JS. Для этого мы должны преобразовать наш файл Variables.scss в файл Variables.module.scss и явно экспортировать наши стили:
Отсюда мы можем просто импортировать наши переменные SCSS в наши файлы JS и использовать там значения.
Вот и все! Обычно я все равно импортирую свой ScssVariables в какой-то файл Theme.js и создаю там константы Javascript, но это полностью зависит от предпочтений.
Удачного стайлинга!
