Как распределить мои переменные sass по всем компонентам React?

Я пытаюсь импортировать свой _variables.scss в свои корневые стили, чтобы все стили были во всех моих компонентах. Проверь это

/*Importing my lib styles*/
@import "./libs/_variables.scss";

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

@import "./pages/login/components/header/Header";

Но он показывает эту ошибку.

Error: Undefined variable: "$primary-color".
        on line 2 of src/pages/login/components/header/Header.scss
>>   background-color: $primary-color;
   --------------------^

reactjs sass

28.12.2018 20:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Ответы 2

Попробуйте импортировать _variables.scss внутри Header.scss

Я не хочу этого делать, подумайте, нужно ли мне импортировать _variables во все мои компоненты ... pff

— 28.12.2018 20:26

@DiegoCardona, пожалуйста, посмотрите еще один ответ, который я опубликовал

— 28.12.2018 20:41

28.12.2018 20:25

один из способов сделать это - просто импортировать любой scss-файл из вашего корневого index.scss

поэтому вместо того, чтобы размещать import './Header.scss'; в Header.js Вы делаете

@import "./_variables.scss";
@import "./components/Header/Header.scss";

в index.scss

и импортировать './index.scss' в index.js

Это то, чем я занимаюсь

— 28.12.2018 20:42

Есть небольшая разница, которую вы импортируете Header.scss в Header.js, вместо этого вам нужно импортировать все в централизованный основной файл scss и импортировать все остальные файлы scss там

— 28.12.2018 20:45

28.12.2018 20:40