Angular 2 - 全局 CSS 文件

Question

是否可以将全局 CSS 文件添加到 Angular 2？ 目前，我有许多不同的组件具有相同的按钮样式 - 但每个组件都有自己的 CSS 文件和样式。这对于更改来说是令人沮丧的。

我在 Stack Overflow 上的某处阅读以补充：

import { ViewEncapsulation } from '@angular/core'; //add this

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None            //add this
})

所以我在根组件中添加了 ViewEncapsulation 行，然后将 CSS 样式添加到根应用 CSS (app.component.css) 并从单个组件 CSS 文件中删除了 CSS 样式，但它不起作用。

肯定有办法添加全局 CSS 文件吗？我是否需要向各个组件添加一些内容以使它们能够访问全局 CSS 文件？

Answer 1

您可以简单地在主 html 文件中导入 css。

Answer 2

只需将您的全局样式写入您的src/styles.css 文件即可。当您运行 ng build 时，该文件将添加到 styles.bundle.js。

如果您想添加更多样式文件，可以在 .angular-cli.json（或 angular.json Angular 6+）文件中进行。在该文件中，您将看到一个名为 styles 的数组，默认情况下只有一个项目 styles.css（或 Angular 6 中的 src/styles.css）。您甚至可以包含.scss 文件。

---

使用 SCSS

如果您想使用 SCSS，只需将您的 src/styles.css 文件的扩展名更改为 .scss，然后通过编辑styles 数组中的条目。

让 Angular 默认使用 SCSS

在创建组件时，您希望 Angular 创建 .scss 样式文件，而不是 .css。方法如下：

角度 7

从 Angular 7 开始，当您使用 ng new appname 创建应用程序时，系统会提示您要使用哪种样式表格式，因此您只需选择 SCSS (source)。似乎这里不再需要手动配置 Angular 以使用 SCSS。

角度 6

在您的 angular.json 文件末尾添加此内容 (source)：

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Angular 4 及更低版本

在 .angular-cli.json 文件的末尾找到它，并将 styleExt 的值更改为 scss：

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

Answer 3

你可以使用：

1. 添加 main.css
2. 在主文件夹中打开 styles.css
3. 添加这一行 (@import 'main.css';)