При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?

Question

[Сергей]

Добрый день!

Столкнулся с проблемой, что при стилизации компонента react возникает ошибка, что переменной не существует. Имеется style.scss, куда импортируются _varisbles, _generic, _fonts, _mixins, а уже данный style.scss импортируется в index.js. Пути верные, ибо те же самые дженерики работают, миксины тоже применяются. Проблема решается, если только импортировать переменные непосредственно в сам файл стиля компонента, но это костыль...

// style.scss
@import "/src/base/styles/variables";
@import "/src/base/styles/fonts.scss";
@import "/src/base/styles/mixins.scss";
@import "/src/base/styles/generic.scss";

@import "normalize.css";

// import "./base/style.scss"
import React from "react";
import ReactDOM from "react-dom";

import "/src/base/style.scss"

import App from "./components/App/App";

var mountNode = document.getElementById("app");
ReactDOM.render(<App />, mountNode);

Comments

[Михаил]

а не может ли быть проблема в импорте файлов? Внутри файла style.scss, который Вы импортируете в index.js, все файлы стилей подключаются с указанием названия файла и расширения, а файл с переменными подключается без расширения. Хотя лично у меня при импорте одного scss-файла в другой автоматически убирается расширение, но мало ли

[Александр Васильев]

Может дело в дефисе?
Или в значении переменной?
Я, к примеру, медиазапросы только так получаю
@media #{$m_1200}{}
так нормально работает и реакт тут не причем, скорее всего

[Сергей]

Михаил, Пробовал с расширением и без. Суть в области видимости переменных, они почему-то видны только в файле, куда напрямую импортируются переменные

Answer 1

[shsv382]

А код ошибки можете написать? Непонятно просто, про какую переменную ругается сборщик, про SCSS или JS. А ещё, насколько я знаю, для подключения модулем файл должен называться style.module.scss

Comments

[Сергей]

Ругается на переменную scss, которая объявлена в variables.scss

Compiled with problems:
×
ERROR in ./src/components/App/app.scss (./src/components/App/app.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/App/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable: "$purple-heart".
        on line 3 of src/components/App/app.scss
>>     color: $purple-heart;
   -----------^
ERROR in ./src/components/App/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable: "$purple-heart".
        on line 3 of src/components/App/app.scss
>>     color: $purple-heart;
   -----------^

    at tryRunOrWebpackError (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5241:12)
    at __webpack_require__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5198:18)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5270:20
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5176:43
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5138:16
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5106:15
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5052:8
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3493:5
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:99:5
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:81:18)
    at ItemCacheFacade.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\CacheFacade.js:115:15)
    at Compilation._codeGenerationModule (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3456:9)
    at codeGen (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5040:11)
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5070:14
    at processQueue (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\util\processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable: "$purple-heart".
        on line 3 of src/components/App/app.scss
>>     color: $purple-heart;
   -----------^

    at Object.<anonymous> (C:\Users\iMeeGo\Desktop\apptest\node_modules\css-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\node_modules\sass-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\src\components\App\app.scss:1:7)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:452:10
    at Hook.eval [as call] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5243:39
    at tryRunOrWebpackError (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5241:12)
    at __webpack_require__ (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5198:18)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5270:20
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5176:43
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5138:16
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5106:15
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3527:9)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5052:8
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3493:5
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:99:5
    at Hook.eval [as callAsync] (eval at create (C:\Users\iMeeGo\Desktop\apptest\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Cache.js:81:18)
    at ItemCacheFacade.get (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\CacheFacade.js:115:15)
    at Compilation._codeGenerationModule (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:3456:9)
    at codeGen (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5040:11)
    at symbolIterator (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\Users\iMeeGo\Desktop\apptest\node_modules\neo-async\async.js:3463:5)
    at C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\Compilation.js:5070:14
    at processQueue (C:\Users\iMeeGo\Desktop\apptest\node_modules\webpack\lib\util\processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

Generated code for C:\Users\iMeeGo\Desktop\apptest\node_modules\css-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\node_modules\sass-loader\dist\cjs.js!C:\Users\iMeeGo\Desktop\apptest\src\components\App\app.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nUndefined variable: \"$purple-heart\".\n        on line 3 of src/components/App/app.scss\n>>     color: $purple-heart;\r\n   -----------^\n");

[shsv382]

Я понял походу

В строках импорта у тебя абсолютный путь
@import "/src/base/styles/variables";

Поменяй на относительный
@import "../../base/styles/variables";

[Сергей]

shsv382, До этого был относительный, тож самое...

[shsv382]

Сергей, на всякий случай спрошу - имя переменной и там и там верно указано?

[Сергей]

shsv382, Да, конечно, вот переменные

// colors
$black: #000000;
$steel-gray: #181823;
$regent-gray: #8491A0;
$shuttle-gray: #5B6876;
$white: #FFFFFF;
$purple-heart: #5221E6;
$emerald: #3CC74E;
$deep-blush: #E95D90;
$serenade: #FFF3E4;
$white-pointer: #FBE4FF;

[shsv382]

А пробовал style.scss в компонент App импортировать, а не в index.js ?

[Сергей]

shsv382, Да, пробовал, результата нет. Область видимости переменных только почему-то в файле, куда они импортированы.
Допустим, если в style.scss написать селектор с использованием переменной, то все работает. Или постоянно импортировать сами переменные в файл со стилями компонентов, но так не норм.
Т.е. вот так

// style.scss
@import "/src/base/styles/variables";
@import "/src/base/styles/fonts.scss";
@import "/src/base/styles/mixins.scss";
@import "/src/base/styles/generic.scss";

@import "normalize.css";

.title{
    color: $purple-heart;
}

[shsv382]

Область видимости переменных только почему-то в файле, куда они импортированы.

А у тебя раньше работало иначе? У меня ни в одном проекте по-другому не работало

[Сергей]

shsv382, Раньше в проектах так и делал. Импортировал все базисные стили в style.scss, а уже затем его к index.js. А затем при стилизации компонентов у меня были переменные из _variables.scss>style.scss>index.js.
Т. е. импортировал единожды всё

[shsv382]

Очень странно. А если закомментить 3 строку с ненайденной переменной, что выдаёт?

[Сергей]

shsv382, Там просто селектор, который обращается к переменной.

.title{
    color: $purple-heart;
}

[shsv382]

Тогда вообще не понятно, если говоришь, что до этого так и делал... А chatGPT что говорит?

[Сергей]

Жпт прогоняет по вашем замечаниям, а потом циклится и теряет контекст

[shsv382]

Вот и я походу уже циклюсь и теряю контекст
Вообще конечно непонятный случай. Можно попробовать копнуть в сторону сборщика (что используете? Webpack? Vite?), посмотреть внимательно конфиг и ещё раз проверить установленные пакеты (sass, sass-loader)

[shsv382]

И ещё деталь: у вас в описании переменные импортируются без расширения SCSS, а остальные файлы - с ним

// style.scss
@import "/src/base/styles/variables"; // здесь добавить .scss
@import "/src/base/styles/fonts.scss";
@import "/src/base/styles/mixins.scss";
@import "/src/base/styles/generic.scss";

[Сергей]

shsv382, По идее должно работать и так, и так, при этом, что с расширением, что без - один результат

[Сергей]

shsv382, Также используется Webpack... sass, sass-loader присутсвуют

[shsv382]

тогда я даже не знаю, чем помочь

[Сергей]

shsv382, Ладно, спасибо Вам большое за уделенное время! Буду копать дальше...