Angularjs2是一款功能強大的前端開發(fā)框架，它可以幫助你更加高效地開發(fā)網(wǎng)頁應(yīng)用程序。在使用Angularjs2時，有時候你會遇到需引用CSS文件的情況。本篇文章將會介紹如何在Angularjs2中引用CSS文件。 在Angularjs2中引用CSS文件非常簡單，你可以在你的組件文件中直接引入CSS文件。例如，如果你想為你的組件引用一個名為style.css的CSS文件，你可以在你的組件文件中添加如下代碼：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./style.css'] // 組件CSS樣式表
})
export class AppComponent {
title = 'My Angular App';
}

注意，在@Comoponent注解中的stylesUrls數(shù)組指定了引入的CSS文件名。如果有多個樣式文件，你也可以像下面的例子一樣通過一個數(shù)組指定：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./style.css', './custom.css'] // 組件CSS樣式表
})
export class AppComponent {
title = 'My Angular App';
}

上述示例代碼中，組件文件引用了style.css和custom.css兩個樣式表。 如果希望引入全局CSS文件，可以在項目的angular.json文件中添加一個全局樣式表。在項目配置文件的styles數(shù)組中指定樣式表文件名即可。例如，下面是一個樣式表文件配置的示例：

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css" // 全局CSS文件
],
"scripts": []
}
}}}}

在styles數(shù)組中添加了“src/styles.css”引用全局CSS文件。這樣就能在整個項目范圍內(nèi)使用styles.css文件中定義的樣式了。 如果你可以在Angularjs2項目中使用CSS文件，這將會讓你的項目更加易于維護和發(fā)展。使用組件級CSS樣式表可以輕松地使組件具有獨立的樣式，而全局CSS文件可以為項目提供一致的外觀和感覺。