Как использовать переменные SCSS в моих компонентах React

Question

Я работаю над проектом React, который следует этой структуре

src |
  components |
    Footer |
      index.jsx
      styles.scss
    Header |
      index.jsx
      styles.scss
    scss |
      helpers.scss
      variables.scss
      ...
    main.scss

В моем файле переменных я использовал css пользовательские переменные, поэтому все они находятся на :root, и я могу получить к ним доступв стилях моих компонентов.

Когда я хотел создать темные цвета, я хотел использовать функцию SCSS darken, но она не оценивает их и выдает ошибку о том, что var(--blue) не является допустимым цветом.

В качестве решения я решил переместить все переменные в переменные SCSS, но при создании проекта выдает еще одну ошибку, которая говорит о том, что $blue не определено.

Уникальное решениевозможно, я могу использовать, это включить файл переменных во все файлы стилей, но я не знаю, есть ли лучшее решение для структуры, которую я использую.

Answer 1

Я использую аналогичную структуру для организации своих файлов .scss.Мне нравится иметь стили в той же папке, что и компонент.Однако я импортирую все файлы scss в мой файл main.scss.Это помогает избежать конфликтов стилей в DOM.

main.scss

import "./scss/helpers.scss"
import "./variables.scss"
import "./Footer/style.scss"
import "./Header/styles.scss"

Убедитесь, что имена ваших файлов подчеркнуты, чтобы все файлы были объединены при компиляции.Обратите внимание, что вам не нужно указывать подчеркивание в импорте.

_helpers.scss
_variable.scss
_style.scss

Используя этот метод, вам нужно импортировать стили только один раз в ваше приложение.index.jsx

Answer 2

Можно использовать пользовательские переменные с этой структурой проекта, используя css-vars mixin.

После предложения опции для оценки пользовательских переменных перед выполнением функции SCSS, парень предложил мнеэтот миксин.Я только что проверил и работает довольно хорошо.

Answer 3

Существуют различные способы, которыми я могу рекомендовать вам заняться этим.

1- Дублируйте значения этих переменных.Добавьте их как в свой файл variables.scss, так и в качестве констант в каком-то другом файле, например, config.js или constants.js, чтобы вы могли ссылаться на эти значения из ваших компонентов реагирования, и недостатком этого является то, чтоне забудьте изменить их в двух местах, если вам нужно изменить значение.

2 - рассмотрите возможность использования styled-components .С помощью стилизованных компонентов вы можете определять свои стили в своих компонентах, используя переменные или реквизиты в стилях.

3- Используйте некоторый механизм для определения этих переменных в одном файле или в качестве переменных среды и настройте процесс сборки наиметь возможность импортировать эти значения в файлы js и scss.