如何在Angular中引用项目中的库css文件

Question

我是一个有角的菜鸟。

我知道如何创建基于组件的css文件，但是如何从模板引用css文件？

例如，我有一个来自模板的animations.css文件，但想在index.html文件的标题中引用它。

项目的根目录中有一个index.html文件。我是否刚刚在同一目录中创建了一个css文件夹并从index.html引用它？

Answer 1

Angular有很多方法来引用您的CSS文件。

选项1：通过CDN在index.html本身中提及它

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

选项2：将其用作全局styles.css文件中的import语句，该文件是在默认情况下或在app.module.ts

中生成的Angular项目时创建的。

@import "~bootstrap/dist/css/bootstrap.min.css";

选项3：您可以在angular-cli.json中将其链接为对特定组件的CSS参考

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css'],
})

因此，名为foo.component.css的文件将包含对foo.component.html的所有css引用。

有关更多参考，Angular Style Docs