Мы переходим от конвейера ресурсов к веб-упаковщику, и я часами пытался найти определенный ответ на этот вопрос, но не могу найти «официальный способ» использования файла глобальных переменных scss для всех файлов scss в моем приложении
Например: у меня есть файл colors.scss
$gray: #000000;
$red: #EF6461;
, и я хочу, чтобы эти переменные scss были доступны для всех моих scss-файлов веб-упаковщика, в настоящее время я импортировал этот файл в свой application.scss но я получил ошибки в каждом scss, что он не может найти эти переменные, потому что, как я понял, webpacker преобразует файлы scss независимо друг от друга, поэтому не видит файл переменных, который я импортировал в application.scss
Так как с этим справиться, сделав глобальный файл конфигурации доступным для всех scss в самой конфигурации webpack (или webpacker), вместо импорта файла конфигурации в каждый scss вручную?
Примечание: импорт файла конфигурации в каждомscss решает проблему, но очень повторяется и хрупок
Обновление
У меня былоразные ошибки компиляции с разными пробами для решения этой проблемы:
1 - если я храню таблицы стилей в папке пакетов webpacker, я получаю много ошибок из всех файлов scss, что они не знают, какую переменную scss я использую (суть этого вопроса)
Ошибки вроде этого:
ERROR in ./app/javascript/packs/stylesheets/components/blog-pages/_blog-index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$green".
on line 16 of xxxxxxx/app/javascript/packs/stylesheets/components/blog-pages/_blog-index.scss
>> color: $green;
---------^
2 - если я храню таблицы стилей рядом с папкой пачек, я получаю другую ошибку 1 на 1 для scss, например:
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: font-awesome.
on line 10 of /Users/ahmed/projects/project-hotelhero/app/javascript/stylesheets/application.scss
>> @import "font-awesome";
^
ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: font-awesome.
on line 10 of XXXXXXXX/app/javascript/stylesheets/application.scss
>> @import "font-awesome";
^
at XXXXXXXX/node_modules/webpack/lib/NormalModule.js:316:20
at XXXXXXXX/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at XXXXXXXX/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (XXXXXXXX/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.callback (XXXXXXXX/node_modules/sass-loader/dist/index.js:73:7)
at Object.done [as callback] (XXXXXXXX/node_modules/neo-async/async.js:8067:18)
at options.error (XXXXXXXX/node_modules/node-sass/lib/index.js:294:32)
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/stylesheets/application.scss:
ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: font-awesome.
on line 10 of XXXXXXXX/app/javascript/stylesheets/application.scss
>> @import "font-awesome";
^