不能在全局文件中的 Angular 中使用 SASS 变量，尽管其他样式可以工作

Question

当我在组件的样式中应用以下SASS时，它可以正常工作。

$test-color: pink;
div{ background-color: $test-color; }

然而，当我将定义移动到样式.scs时，它并没有。我已经尝试添加(现在显然已弃用(@import "../styles.scss";和当前推荐的@use "../styles.scss";。我甚至试图将颜色定义放在colors.scss中，并将该引用添加到angular.json。在styles.scss中声明的类的样式可以工作(即使不导入/使用，因为它是资产中的引用(。但变量并没有。

根据这一建议，它应该与@include合作。在本文档中，展示了如何分配值。我发现这与此有关，但我看不出这与我的情况有何不同。我试着理解这个博客，但没有看到任何关于我做错了什么的相关提示。我还尝试添加以下内容(如图所示(。

"stylePreprocessorOptions": { "includePaths": [ "src" ] }

不过，我仍然会收到下面的错误。

中的错误/src/app//some.component.scss
模块构建失败(来自./node_modules/sass-loader/dist/cjs.js(：
SassError：未定义的变量
14│背景颜色：$test color
___│ _________________ ^^^^^^^^^^^^
src\app。。。\some.component.scss 14:23根样式表

在谷歌上搜索实际错误时，我说变量不存在。但据我所知，确实如此！这里提出了一个相关的问题，尽管有点不同，但没有相关的答案。

我遗漏了什么？我该如何进一步调查？

Answer 1

错误是由于所指出的语法错误。它需要参考颜色的来源。

background-color: colors.$test-color;

此外，导入是必需的，但需要通过引用模块而不是文件来完成。

@use "colors";

在一个健康的代码库中，应该将以下内容放在文件src\colors.scss.中

$test-color: pink;

然后你可以这样使用它。

@use "colors";
div{ background-color: colors.$test-color; }

在配置文件angular.json中，需要设置以下内容。

"styles": { ... },
"stylePreprocessorOptions": { "includePaths": [ "src" ] },
"scripts": { ... },

此外，需要注意的是，以下划线为前缀的文件会受到不同的处理，因此，首选_colors.scss。虽然将辅助文件直接放置在/src中是有效的并且可以工作的(与styles.scs的情况一样(，但约定要求将它们放置在/src/assets/styles，从而更改预处理器的选项，如下所示。

"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }