css - 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 元素默认包含一个 styles.css 文件在元素的 src 文件夹下 (myAngularCliProjectName/src/styles.css).
在此文件中，您将能够添加全局样式并导入其他样式文件。
根本不需要从 index.html 文件链接它们。