将自定义 .css 文件添加到 Angular-CLI 项目

Question

我正在向使用angular-cli 1.0.6的Angular 4应用程序添加现有的.js和.css文件。在最近的升级之前，我只是在index.html中引用它们--我知道这是“错误”的，但对于我的当前需求来说，它起作用了。

最近一次更新后，我尝试了所有方法都无法正确加载它们，我已经成功地将JavaScript文件添加到angular-cli.json并将其导入到组件中。这个工作了，但同样的方法不适用于.css文件。

我曾试过在index.html中这样写：<link rel="stylesheet" type="text/css" href="/scripts/test.css">，也试过在组件的模板内这样写：<link rel="stylesheet" type="text/css" href="../../../app/scripts/test.css">, 最后我还尝试把它添加到组件的styles属性内：styleUrls: ['../edit.scss', '../../scripts/test.css'],。

虽然路径有效（我可以在编辑器中跟随它们），但这些方法都无法正常加载CSS文件，报错404。

请问这个问题的正确解决方法是什么？

- beachCode

Answer 1

请打开angular-cli.json文件，在其中找到arrays属性，您可以在那里添加您的css文件，就像我使用bootsrap.min.css一样。

- LXhelili

---

谢谢您的回答，但我已经尝试过了。正如我在问题中提到的，将其添加到angular-cli.json中并没有帮助。但是为了明确起见，在我添加它之后，我如何在特定组件模板中包含它而不是全局使用？ - beachCode

Answer 2

一个 angular-cli 项目默认包含一个 styles.css 文件，该文件位于项目的 src 文件夹下 (myAngularCliProjectName/src/styles.css)。
在这个文件中，您可以添加全局样式并导入其他样式文件。
完全不需要从 index.html 文件中链接它们。

- Unsinkable Sam