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

Question

我正在将现有的 .js 和 .css 文件添加到使用 angular-cli 1.0.6 的 Angular 4 应用程序中。在最近的升级之前，我只是在 index.html 中引用它们——我知道这是“错误的”，但它可以满足我当前的需求。

最近一次更新后，我尝试过的所有操作都得到 404。我设法通过将 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"> 我已经尝试将它添加到组件中的样式：styleUrls: ['../edit.scss', '../../scripts/test.css'],

即使路径有效（我可以在编辑器中关注它们），我也会为所有这些路径获得 404。

这样做的正确方法是什么？

Answer 1

默认情况下，angular-cli 项目在项目的 src 文件夹 (myAngularCliProjectName/src/styles.css) 下包含一个 styles.css 文件。
在此文件中，您将能够添加全局样式并导入其他样式文件。
根本不需要从index.html 文件链接它们。

Answer 2

转到您的 angular-cli.json 文件，其中有一个数组属性，您可以在该位置添加您的 css 文件，就像我对 bootsrap.min.css 所做的那样。