How to make React see global scss variables?

Question

React

Good evening.
Created an application via create-react-app v3. Usually I always wrote configs manually, but now, for the sake of development speed, this had to be sacrificed. Installed bootstrap, node-sass, created a couple of variables, tried to use it, and... undefined variable. As I understand it, due to the fact that the styles are imported into the components directly.

Rags of code

// 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() {}

Is it possible to make scss variables visible and available globally throughout the project? Other than the obvious pulling everything into each component style file.

Answer 1

I myself was looking for an opportunity to import globally, but I did not find it. You will have to put variables, mixins, etc. into each component, but I simplified it a bit, created a separate utils file, imported variables, mixins, functions and everything necessary there, then created .env in the root folder and registered SASS_PATH = src (indicates the absolute path to the folder), and then you import it like this @ import 'styles/utils';