我们正在从资产管道迁移到Webpacker,我试图寻找一个确定的答案长达数小时,但找不到“正式方法”来将全局scss变量文件用于我的应用程序中的所有scss文件
例如,我有一个文件colors.scss
$gray: #000000;
$red: #EF6461;
&我希望所有webpacker scss文件都可以使用这些scss变量,当前我已将该文件导入到application.scss
中,但是在每个scss中都出现错误,因为它找不到这些变量,因为我知道webpacker会相互独立地转换scss文件,因此看不到我在application.scss中导入的变量文件
那么如何处理此问题,使全局配置文件可用于webpack(或webpacker)配置本身中的所有scs,而不是手动在每个scss中导入配置文件?
注意: 在每个scss中导入配置文件都可以解决此问题,但是它具有重复性和脆弱性
更新
为了解决这个问题,我在进行不同的试验时遇到了不同的编译错误:
1-如果我将样式表保留在webpacker packs文件夹中,那么我从所有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-如果我将样式表放在packs文件夹旁边,则类似的scs会出现其他1比1错误:
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";
^