时间戳

首页 > 解决方案 > 如何以角度引用项目中的库 css 文件

angular - 如何以角度引用项目中的库 css 文件

问题描述

我是一个完整的角菜鸟。

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

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

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

标签： angular

解决方案

角度有很多方法可以引用您的 css 文件。

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

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

选项 2：将其用作全局 styles.css 文件中的导入语句，该文件是在默认情况下生成 Angular 项目时或在 app.module.ts 中创建的

@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

推荐阅读