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文件中編寫全局樣式即可。 運行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

從Angular 7開始，當您使用ng new appname創建應用程序時，系統將提示您要使用哪種樣式表格式，因此您只需選擇SCSS（ 源代碼 ）。 似乎這里結束了手動配置Angular以使用SCSS的需要。

Angular 6

在angular.json文件的末尾添加它（ 源代碼 ）：

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

角4和更低

在.angular-cli.json文件的末尾找到它，並將.angular-cli.json的值styleExt為scss ：

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

Answer 2

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

Answer 3

您可以使用：

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