如何导出全局scss变量文件以导入Rails 6 webpacker中的所有scss文件答案

【问题标题】：How to export a global scss variables file to be imported to all scss files in Rails 6 webpacker如何导出全局scss变量文件以导入Rails 6 webpacker中的所有scss文件
【发布时间】：2020-03-05 03:59:29
【问题描述】：

我们正在从资产管道迁移到 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";

       ^

【问题讨论】：

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

标签： ruby-on-rails webpack sass webpacker

【解决方案1】：

我在 sprockets -> webpacker 迁移期间进行谷歌搜索时发现了这个问题，并想我会分享我的发现。

我最终使用了sass-resources-loader，这是我的配置：

// config/webpack/environment.js

// ...

// sass/scss loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function (element) {
  return element.loader === 'sass-loader'
})

const options = sassLoaderConfig.options
options.implementation = require('sass') // Use Dart-implementation of Sass (default is node-sass)

const sassResourceLoader = require('./loaders/sass-resource-loader')
environment.loaders.prepend('sass', sassResourceLoader)

//...

// config/webpack/loaders/sass-resource-loader.js

module.exports = {
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          './app/javascript/styles/abstract/*.scss' // I've got all my "global" stuff in this one abstracts folder
        ]
      }
    }
  ]
}

【讨论】：

【解决方案2】：

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

正确的方法是将 stylesheets 文件夹放在 packs 文件夹旁边，即把它放在 app/javascript/stylesheets 中，然后将你的 scss 组织在一个 application.scss 文件中，这将正确地调用你的 scss 文件。

【讨论】：