ruby-on-rails - 如何导出要导入到 Rails 6 webpacker 中所有 scss 文件的全局 scss 变量文件

Question

我们正在从 Assets 管道迁移到 webpacker & 我试图为此寻找一个明确的答案几个小时，但找不到将全局 scss 变量文件用于我应用程序中的所有 scss 文件的“官方方式”

例如:我有一个文件 colors.scss

$gray: #000000;
$red: #EF6461;

& 我希望这些 scss 变量可用于我所有的 webpacker scss 文件，目前我已经将该文件导入到我的 application.scss 但我在每个 scss 中都遇到了它找不到的错误这些变量，因为据我所知，webpacker 将相互独立地转换 scss 文件，因此看不到我在 application.scss 中导入的变量文件

那么如何处理这个问题，使全局配置文件对 webpack(或 webpacker)配置本身中的所有 scss 可用，而不是手动在每个 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 文件夹旁边，我会得到其他 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";

       ^

Answer 1

所以我遇到的主要问题是将样式表放在错误的目录中，将样式表放在 /app/javascript/packs 中，这导致了 webpack 单独转译每个 scss 文件的根本问题

正确的方法是将 stylesheets 文件夹放在 packs 文件夹旁边，即将它放在 app/javascript/stylesheets 中，然后在 application.scss 中组织你的 scss > 将按正确顺序调用您的 scss 文件的文件。