如何导入具有id属性的angular样式表？

Question

我正在尝试将引导仪表板模板集成到Angular8项目中。但是我在resource not found中链接css文件时遇到index.html错误，

  <link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight">
  <link rel="stylesheet" href="./src/assets/css/theme-dark.min.css" id="stylesheetDark">

在我的模板中，他们在每个样式表中使用了id属性。由于这个id属性（id="stylesheetLight"），我无法将其导入； style.css和angular.json都没有。而且，如果不指定ID，则会破坏设计。

导入index.html时遇到的错误：

如何解决资源未找到错误？还是有什么方法可以将style.css中的ID指定为@import？

Answer 1

您必须将其添加到 angular.json 文件中：

"options": {
  ...
  "styles": [
    "src/styles.css",
    "src/assets/css/theme.min.css"
    "src/assets/css/theme-dark.min.css"
  ],
  "scripts": [],
  "assets": [
    ...
  ]
}

在Angular中，添加像<link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight">这样的样式表不是正确的方法

Answer 2

您可以创建样式表，例如“ shared.css”，并将其添加到angular.json文件中：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/shared.css"
        ],

，并有条件地使用您的样式：

[class.my-class]="foo=='light'"

Answer 3

我有同样的问题，我要添加id的原因是因为我想从https://material.angular.io/guide/theming

<link id="themeAsset" rel="stylesheet" href="/path/to/my/theme-name.css">

function changeTheme(themeName) {
  document.getElementById('themeAsset').href = `/path/to/my/${themeName}.css`;
}

所以我可以通过单击更改整个应用程序样式的样式，而不是将类添加到每个组件中