Angular 2 - 全局CSS文件

Question

是否可以向Angular 2添加全局CSS文件？ 目前，我有许多具有相同按钮样式的不同组件 - 但每个组件都有自己的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

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

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

使用SCSS

如果您想使用SCSS，只需将src/styles.css文件的扩展名更改为.scss，然后在[{1}}（或{6}中的.angular-cli.json ）通过编辑angular.json数组中的条目来保存文件。

默认情况下使Angular使用SCSS

创建组件时，您希望Angular创建styles样式文件而不是.scss。以下是：

Angular 7

从Angular 7开始，当您使用.css创建应用时，系统会提示您要使用哪种样式表格式，因此您只需选择SCSS（source）。这似乎结束了手动配置Angular以使用SCSS的需要。

Angular 6

在ng new appname文件（source）的末尾添加此内容：

angular.json

角度4和低角度

在"schematics": { "@schematics/angular:component": { "styleext": "scss" } } 文件末尾找到此项，并将.angular-cli.json的值更改为styleExt：

scss

Answer 2

您只需在主html文件中导入css即可。

Answer 3

您可以使用：

1. 添加main.css
2. 在主文件夹中打开styles.css
3. 添加此行（@import'main.css';）