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

我将现有的.js和.css文件添加到使用angular-cli 1.0.6的Angular 4应用程序。在最近的升级之前，我只是在index.html中引用它们 - 我知道这是'错误'，但它适用于我目前的需求。Angular将自定义.css文件添加到Angular-CLI项目

经过最近的更新，我得到了404s我所尝试过的一切。我已经成功添加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'],

尽管路径是有效的（我可以在编辑器中跟着它们），但它们都是404s。

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

来源

2017-05-27 beachCode

文件夹结构？ – Aravind

src/app/scripts/test.css – beachCode

更新它作为张贴的截图。 – Aravind

angular-cli项目默认包含项目文件夹src下的styles.css文件（myAngularCliProjectName/src/styles.css）。
在此文件中，您将能够添加全局样式并导入其他样式文件。
根本没有必要将它们从index.html文件中链接出来。

来源

2017-05-27 21:26:46

好点。我会试试看。 Thx – beachCode

这个工作在styles.css中：@import“app/scripts/test.css”; – beachCode

转到您的angular-cli.json文件，并且存在数组的属性，您可以在该位置添加您的css文件，就像我使用bootsrap.min.css所做的那样。

来源

2017-05-27 21:31:41 LXhelili

Thx的答案，但我试过。正如我在问题中提到的，在angular-cli.json中添加它并没有帮助。但要清楚的是，在我添加它之后，如何包含在某个组件模板中，但不是全局组件？ – beachCode

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

回答

相关问题