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

    @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 в глобальном файле подключения стилей. Тут надо раскуривать что и в какой последовательности подключается.
    Ответ написан
    Комментировать