在 Angular 组件中导入 SCSS 颜色变量不起作用答案

【问题标题】：Import SCSS color variables in Angular component not working在 Angular 组件中导入 SCSS 颜色变量不起作用
【发布时间】：2020-04-23 01:35:16
【问题描述】：

我正在创建一个 Angular 9 应用程序，我的文件夹结构如下所示：

| app
  | app.component.ts
  | app.component.html
  | app.component.scss
| assets
  | _colors.scss

在_colors.scss 文件中，我定义了两种颜色：

$red: #DA0000;
$blue: #1080E1;

在app.component.scss 中，我正在导入并使用如下颜色：

@import '../assets/colors';

.some-class {
  background-color: $blue;
}

但这不起作用，没有应用颜色。并且没有错误。 VSCode 智能感知帮助我导入路径，所以路径没问题。如果我尝试使用未定义的颜色，例如$black，我会收到错误消息，因此它似乎可以导入，但未应用颜色。我在这里缺少什么？有任何想法吗？提前致谢。

【问题讨论】：

您确定该规则没有被其他地方覆盖吗？
我敢肯定，这是一个非常小的应用程序。事实上，如果我更改 .some-class { background-color: blue; } 的值，它就可以工作。但是，如果我使用该变量，它就不再起作用了。
如果你使用colors.$blue呢？
不，我得到一个编译错误：SassError: There is no module with the namespace "colors".
你能创建一个 stackblitz 例子吗？

标签： angular sass angular9

【解决方案1】：

您需要在angular.json的项目中添加以下内容：

{
  "projects": {
    "YOUR_PROJECT_NAME": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/assets"]
            },
          }
        }
      }
    }
  }
}

我建议不要将其存储在 assets 中，而是将其存储在 src/styles 或 src/scss 中，因为 assets 会在您构建应用程序时发布。您真的不希望人们能够看到/访问原始 scss 文件。

然后您可以按如下方式导入：

@import '_colors';

【讨论】：

感谢您的帮助，但它不起作用。我将颜色文件移至src/styles，但也没有运气。
你可以尝试重启ng serve吗？它不是由angular.json的更改触发的，因此您必须手动重新启动它。
我做到了，但结果相同。问题是我在旧项目中总是有颜色变量，而且它一直在工作。我想知道这是否是 Angular 9 问题...
它有效，感谢您的帮助。我把stylePreprocessorOptions 放错了。昨天在这个问题上苦苦挣扎了一天之后，我已经没有思路了。