Angular 2 - 全局 CSS 文件

Angular 2 - Global CSS file

提问by dandev91

Is it possible to add a global CSS file to Angular 2? At the moment I have many different components that have the same button styling - but each of the components have their own CSS file with the styling. This is frustrating for changes.

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

I read somewhere on Stack Overflow to add:

我在 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
})

So I added the ViewEncapsulation lines in the root component, then added the CSS styling to the root app CSS (app.component.css) and removed the CSS styling from individual component CSS files, and it did not work.

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

Surely there is a way to add a global CSS file? Do I need to add something to the individual components to make them access the global CSS file?

当然有办法添加全局 CSS 文件吗？我是否需要向各个组件添加一些内容才能让它们访问全局 CSS 文件？

采纳答案by 80sax

You can simply import the css in the main html file.

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

回答by Parziphal

Just write your global styles in your src/styles.cssfile. That file will be added to styles.bundle.jswhen you run ng build.

只需在src/styles.css文件中写入全局样式即可。这个文件将被添加到styles.bundle.js您运行时ng build。

If you'd like to add more style files, you can do so in your .angular-cli.json(or angular.jsonfor Angular 6+) file. In that file you'll see an array called styles, with a single item by default which is styles.css(or src/styles.cssin Angular 6). You can even include .scssfiles.

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

---

---

Using SCSS

使用 SCSS

If you want to use SCSS, simply change the extension of your src/styles.cssfile to .scss, then reflect the change in your .angular-cli.json(or angular.jsonin 6+) file as well, by editing the entry in the stylesarray.

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

Make Angular use SCSS by default

让 Angular 默认使用 SCSS

When creating components, you'd like Angular to create .scssstyles files instead of .css. Here's how:

创建组件时，您希望 Angular 创建.scss样式文件而不是.css. 就是这样：

Angular 7

角 7

Starting from Angular 7, when you create an app with ng new appname, you will be prompted which stylesheet format you'd like to use, so you just choose SCSS (source). It seems like here ends the need to manually configure Angular to use SCSS.

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

Angular 6

角 6

Add this at the end of your angular.jsonfile (source):

在您的angular.json文件（source）的末尾添加：

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

Angular 4 and lower

Angular 4 及以下

Locate this by the end of your .angular-cli.jsonfile, and change the value of styleExtto scss:

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

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

回答by Ahmad Aghazadeh

You can use:

您可以使用：

1. Add main.css
2. Open styles.css in main folder
3. Add this line (@import 'main.css';)

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