Как заставить React видеть глобальные scss переменные?

Доброго вечера.
Создал приложение через create-react-app v3. Обычно всегда конфиги вручную писал, но сейчас, ради скорости разработки, этим пришлось пожертвовать. Установил буцтрап, node-sass, создал пару переменных, попытался заюзать, и... undefined variable. Как я понимаю, ввиду того, что стили импортятся в компоненты напрямую.
Тряпочки кода
// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import 'assets/scss/index.scss'; // <-- тут импортится буцтрап

import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

// index.scss
@import "~shards-ui/src/scss/shards.scss";
@import '~bootstrap/scss/bootstrap.scss'; // <-- импортим полный буцтрап

@import 'variables'; // <-- мои переменные, видны внутри этого файла

// любой компонент
import './style.scss'; // <-- стили компонента, в этом файле scss переменные уже не видны

export default function Component() {}

Можно ли сделать так, чтобы scss переменные были видны и доступны глобально по всему проекту? Кроме очевидного подтягивания всего в каждый файл стилей компонента.
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ответы на вопрос 1
ktim8168
@ktim8168
Frontend Developer
Сам искал возможность испортировать глобально, но не нашел. Придется в каждый компонент сувать переменные, миксины и т.д, но я упростил немного, создал отдельный utils файлик, туда импортнул переменные, миксины, функции и все что необходимо, затем в корневой папке создал .env и пропиcал SASS_PATH = src (указывает абсолютный путь до папки), а далее уже импортируешь таким образом @ import 'styles/utils';
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы