Question

我为自己的应用创建了自定义主题，但我不知道如何使用它。从文档中，我看到它应该包含在styles.scss文件夹中的src文件中，但我的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，

如果您使用的是Angular CLI，则支持将Sass编译为css 内置;你只需要为＆＃34;样式＆＃34;添加一个新条目。列表 angular-cli.json指向主题文件（例如，麒麟-APP-theme.scss）。

Answer 2

如果您使用的是角度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的lesect。您可以在cli配置中更改下面的行

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

Answer 3

在 angular.json 中添加主题的另一种方式

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

就我而言，我从角度材料中添加了一个主题并且对我有用。

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

3 个答案: