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在构建应用程序时会发布。您真的不希望人们能够查看/访问原始的scss文件。

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

@import '_colors';

在Angular组件中无法导入SCSS颜色变量

1 个答案: