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 6+ 的 angular.json）文件中添加。在该文件中，您将看到一个名为 styles 的数组，默认情况下有一个项目是 styles.css（或 Angular 6 中的 src/styles.css）。您甚至可以包含 .scss 个文件。

使用 SCSS

如果您想使用 SCSS，只需将 src/styles.css 文件的扩展名更改为 .scss，然后将更改反映在您的 .angular-cli.json（或 angular.json 6+) 文件，通过编辑 styles 数组中的条目。

使 Angular 默认使用 SCSS

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

Angular 7

从Angular7开始，当你使用ng new appname创建应用程序时，系统会提示你要使用哪种样式表格式，所以你只需选择SCSS（source).似乎这里结束了手动配置 Angular 以使用 SCSS 的需要。

Angular 6

将此添加到 angular.json 文件 (source) 的末尾：

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

Angular 4 岁及以下

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

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

Answer 3

您可以使用：

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

Angular 2 - 全局 CSS 文件

Angular 2 - Global CSS file

css

angular-cli

angular

使用 SCSS

使 Angular 默认使用 SCSS

Angular 7

Angular 6

Angular 4 岁及以下