Angular将<style>标签放置在自定义样式表<link>标签之后 _编程开发

创始人

2024-10-26 20:30:21

0次

在Angular中，默认情况下，组件样式表会被放置在全局样式表之后，以确保它们能够覆盖全局样式。然而，如果在组件内使用了内联样式或使用了component styles，那么这些样式表会被放置在自定义样式表包含的标签之后，导致难以覆盖全局样式。

为了解决这个问题，可以将组件样式表和自定义样式表都打包成angular.json文件，这样可以确保组件样式表在自定义样式表之前被加载。

例如，在angular.json文件中的styles属性中包含自定义样式表的连接，如下所示：

"styles": [
  "src/styles.scss",
  "src/custom-styles.css",
  ...
]

然后，在组件样式表中，可以使用深度选择器（/deep/ 或 ::ng-deep）来确保样式能够覆盖全局样式，如下所示：

:host /deep/ .my-class {
  color: red;
}

或者，如果使用Sass等CSS预处理器，则可以在组件样式表中导入自定义样式表，并使用!important来确保样式能够覆盖全局样式，如下所示：

@import '../custom-styles.scss';

.my-class {
  color: red !important;
}