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

Question

[Алексей Николаев]

Доброго вечера.
Создал приложение через 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 переменные были видны и доступны глобально по всему проекту? Кроме очевидного подтягивания всего в каждый файл стилей компонента.

Answer 1

[EGO7000]

Если вдруг кто будет искать ответ спустя столько лет (и для одного подписавшегося) - есть такая штука как CRACO. Сделана для тех, кто хочет править конфиги create-react-app без eject'a. Вот ссылка на статью с ответом на ваш вопрос.

Если коротко, то:

1. Ставим пакет CRACO
npm i -D @craco/craco
Если используем typescript, то ещё
npm i -D @craco/types

2. В package.json меняем react-scripts на craco

"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

3. Создаём в корне проекта файл конфигурации craco.config.js со следующим содержимым

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        additionalData: `
          @import "src/assets/scss/_variables.scss";
          @import "src/assets/scss/_mixins.scss";
        `,
      },
    },
  },
};

3.1. Для адептов TS и ньюскул можно вместо craco.config.js создать .cracorc.ts с таким содержимым

export const style = {
  sass: {
    loaderOptions: {
      additionalData: `
			@import "src/assets/scss/_variables.scss";
			@import "src/assets/scss/_mixins.scss";
		  `,
    },
  },
};

* Пути и файлы естественно заменяете на свои.

На выходе получите глобальные переменные и миксины в компонентах без дополнительно импорта, но вероятно не сможете использовать новомодные @use в глобальном файле подключения стилей. Тут надо раскуривать что и в какой последовательности подключается.

Answer 2

[Timur Kostenko]

Сам искал возможность испортировать глобально, но не нашел. Придется в каждый компонент сувать переменные, миксины и т.д, но я упростил немного, создал отдельный utils файлик, туда импортнул переменные, миксины, функции и все что необходимо, затем в корневой папке создал .env и пропиcал SASS_PATH = src (указывает абсолютный путь до папки), а далее уже импортируешь таким образом @ import 'styles/utils';