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

Question

我正在创建一个 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 intellisense 帮助我输入路径，所以路径没问题。如果我尝试使用 $black 之类的未定义颜色，我会收到错误消息，因此似乎导入工作正常但未应用颜色。我在这里缺少什么？有任何想法吗？提前致谢。

Answer 1

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

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

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

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

@import '_colors';

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

Import SCSS color variables in Angular component not working

sass

angular

angular9