CSS 如何为 Angular 6/7 库添加全局样式

在本文中，我们将介绍如何为 Angular 6/7 库添加全局样式。通过添加全局样式，我们可以为整个应用程序或库提供一致的外观和风格，而不需要在每个组件中重复定义样式。

阅读更多：CSS 教程

直接在全局样式中添加样式

Angular 应用程序或库通常具有一个名为 styles.scss 的文件，它位于项目的根目录中。要添加全局样式，我们可以直接在这个文件中添加样式规则。

下面是一个示例，展示了如何添加全局样式：

/* styles.scss */

/* 添加全局字体样式 */
body {
  font-family: 'Arial', sans-serif;
}

/* 添加全局按钮样式 */
button {
  background-color: dodgerblue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

/* 添加全局链接样式 */
a {
  color: navy;
  text-decoration: none;
}

使用这种方法，我们可以在全局样式中定义通用的样式规则，然后在整个应用程序或库中重用它们。

使用 Angular CLI 配置全局样式

除了直接在 styles.scss 文件中添加样式规则之外，我们还可以使用 Angular CLI 来配置全局样式。通过这种方法，我们可以通过 Angular CLI 为库定义全局样式。

首先，我们需要在库的构建配置文件 angular.json 中添加全局样式文件路径。在 "projects" 下的 "architect" 对象中找到库的构建配置，然后修改 "options" 下的 "styles" 属性，如下所示：

"projects": {
  "my-library": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss",
            "path/to/global-styles.scss"
          ]
        }
      }
    }
  }
}

将 "path/to/global-styles.scss" 替换为实际的全局样式文件路径。

接下来，我们可以在全局样式文件中添加样式规则。例如，我们可以在 "global-styles.scss" 文件中添加以下内容：

/* global-styles.scss */

/* 添加全局容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 添加全局警告样式 */
.alert {
  background-color: tomato;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

使用 Angular CLI 配置的方式，我们可以为库定义额外的全局样式，而不会干扰到其他应用程序。