我到底在哪里包含自定义主题文件？

Question

我为我的应用程序创建了一个自定义主题，但我不知道如何使用它。从文档中，我看到它应该包含在 src 文件夹中的 styles.scss 文件中，但我的 src 文件夹中没有该文件。相反，我有 styles.css。这是我的 angular-cli.json 文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
"name": "test"
  },
  "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css"
  ],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
"protractor": {
  "config": "./protractor.conf.js"
   }
  },
  "lint": [
{
  "project": "src/tsconfig.app.json",
  "exclude": "**/node_modules/**"
},
{
  "project": "src/tsconfig.spec.json",
  "exclude": "**/node_modules/**"
},
{
  "project": "e2e/tsconfig.e2e.json",
  "exclude": "**/node_modules/**"
}
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
   }
  },
  "defaults": {
    "styleExt": "css",
"component": {}
  },
 "styles": [
       "styles.css",
        "src/new-theme.scss"
      ]

}

Answer 1

将其导入 .angular-cli.json 文件的 styles 部分：

"styles": [
        "styles.css",
        "new-theme.scss"
      ],

来自documentation、

If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to add a new entry to the "styles" list in angular-cli.json pointing to the theme file (e.g., unicorn-app-theme.scss).

Answer 2

如果您正在使用 angular cli，您可以在您的 .angular-cli.josn 文件中添加主题 css 文件，如下所示。

  "prefix": "sd",
  "styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss",
    "../node_modules/font-awesome/scss/font-awesome.scss",
    ...
    "styles.scss"
  ],

它说 scss 因为该项目不太可能使用 scss 而不是 css。您可以在以下行的 cli 配置中更改它

  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Answer 3

在 angular.json

中添加主题的另一种方式

"styles": [
   "@angular/material/prebuilt-themes/pink-bluegrey.css",
   "src/styles.css"
],

在我的例子中，我从 angular material 添加了一个主题并为我工作。

我到底在哪里包含自定义主题文件？

Where exactly do I include a custom theme file?

angular-material

angular-material2

angular