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

Question

Я пытаюсь импортировать мои _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;
   --------------------^

Answer 1

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

, а не помещать import './Header.scss';в Header.js Вы делаете

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

в index.scss

и импортируете './index.scss' в index.js

Answer 2

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