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

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

例如：我有一个文件

colors.scss

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

&我希望这些scss变量可用于我的所有webpacker scss文件，目前我已将该文件导入我的

应用程序.scss

，但我在每个scss中都遇到错误，无法找到这些变量，因为据我所知，webpacker将独立地转换scss文件，因此，没有看到我在application.scss中导入的变量文件

那么，如何处理这个问题，使全局配置文件可用于webpack（或webpack）配置本身中的所有SCS，而不是手动导入每个SCS中的配置文件

注: 在每个SCS中导入配置文件可以解决这个问题，但它具有很强的重复性和脆弱性

更新

---

为了解决这个问题，我在不同的试验中遇到了不同的编译错误：

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;

   ---------^

    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";

       ^

2-如果我将样式表保留在packs文件夹旁边，我会得到SCS的其他1乘1错误，如下所示：

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;

   ---------^

    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";

       ^

---

因此，我遇到的主要问题是将样式表放在错误的目录中，将样式表放在

/app/javascript/packs

中，这导致了webpack单独传输每个scss文件的根本问题

---

正确的方法是将样式表文件夹放在packs文件夹旁边，这就是把它放入

app/javascript/stylesheets

&然后将你的SCS组织在一个

application.scss

文件中，该文件将正确地调用你的scss文件。

我在sprockets->webpacker迁移过程中用谷歌搜索时发现了这个问题，我想分享我的发现

我最终使用了，下面是我的配置：

//config/webpack/environment.js
// ...
//sass/scss加载程序配置
const sassLoader=environment.loaders.get（'sass'）
const sassLoaderConfig=sassLoader.use.find（函数（元素）{
return element.loader==='sass loader'
})
const options=sassLoaderConfig.options
options.implementation=require（'sass'）//使用sass的Dart实现（默认为节点sass）
const sassResourceLoader=require（“./loaders/sass资源加载器”）
environment.loaders.prepend（'sass'，sassResourceLoader）
//...

//config/webpack/loaders/sass-resource-loader.js
module.exports={
测试：/\.scss$/,，
使用：[
“样式加载器”，
“css加载程序”，
“sass loader”，
{
加载器：“sass资源加载器”，
选项：{
资源：[
'./app/javascript/styles/abstract/*.scss'//我的所有“全局”内容都在这个“一个摘要”文件夹中
]
}
}
]
}

使用Rails 6和webpacker，将所有scss文件导入application.scss，获取变量没有问题。你确定webpack正在编译吗？不，它实际上没有编译，这就是为什么我在scss问题上寻求帮助，这就是为什么webpack无法编译（但只针对scss，对于js它现在可以工作）可能还有另一个错误掩盖了它-你的编译日志是什么样子的？我在不同的测试中有不同的编译错误，为了清楚起见，我将用我的错误更新这个问题，感谢您的帮助我在wepack中使用sass资源加载程序。全局文件、可变颜色等都是为整个项目下载的。请记住，这些文件不能在其他任何地方导入，否则您将有重复的代码