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

Я могу порекомендовать вам решить эту проблему разными способами.

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

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

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

Я использую аналогичную структуру для организации моих файлов .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

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

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

I, если вы не хотите использовать styled-component тогда вы можете перейти по этой ссылке. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

Из React 17

Чтобы получить доступ к вашим переменным scss в компонент реакции, вам нужно сделать что-то вроде этого

1. Установите node-sass как зависимость или зависимость разработчика
2. Нет необходимости вносить какие-либо изменения в конфигурацию в webpack
3. импортировать как модуль <- главное

variables.module.scss

$color: skyblue;
$primaryColor: red;

:export {
    color: $color;
    primary-color: $primaryColor;
}

App.js

import variables from '<YOUR_PATH>/variables.module.scss';

const App = () => {
    console.info(variables);
}