Angular - 包括 index.html 中的 CSS 文件

Question

我正在尝试在使用 CLI 创建的 Angular 项目中使用 angular2-busy 库，但在导入样式表时遇到问题：

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">

浏览器告诉我它找不到文件，即使路径正确。我还检查了该文件是否存在，并且确实存在。当我取出 rel="stylesheet" 时，我没有收到错误消息，但是动画不起作用。

如果有人好奇，这是我尝试使用的包： https ://www.npmjs.com/package/angular2-busy

原文由 ecain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Angular CLI 有自己的方式来初始化你的全局 css/js。

它们位于 .angular-cli.json 配置

找到 "styles": 并在那里添加你的CSS

例子 ：

 "styles": [
   "../node_modules/angular2-busy/build/style/busy.css",
   "styles.css"
],

希望有帮助。

原文由 penleychan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

基本上有三种不同的方法可以做到这一点： -

1. 通过将它添加到 angular-cli.json 文件中的“样式”数组，如@penleychan 在他的回答中所示。

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

1. 您可以直接将 css 文件导入 styles.css 文件（或任何其他 css 文件），该文件包含在 angular-cli.json 文件的“styles”数组中，方法是在该文件顶部添加 @import 语句。

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

1. 通过添加链接元素将 css 文件包含在 index.html 页面中。

您可以在此 链接 上找到更详尽的解释和更多选择

原文由 Yatharth Varshney 发布，翻译遵循 CC BY-SA 3.0 许可协议