angular2-cli 无法加载样式错误答案

【问题标题】：angular2-cli cannot load style errorangular2-cli 无法加载样式错误
【发布时间】：2017-04-30 11:28:08
【问题描述】：

我刚刚使用 ng new myapp 创建了一个新的 angular2 应用程序，并且在 index.html 中加载样式时出现错误。我只是在 index.html 中添加了一行：

<link rel="stylesheet" href="./css/styles.css">

当然，我在 src/css/styles.css 中添加了一个文件夹和文件。而在 chrome 中结果显示

localhost/:8 GET http://localhost:4200/css/styles.css 红色（状态 = 404) 未找到。

知道错误是什么吗？

当在编辑器中点击 ctrl + follow 链接时，我得到了 css 文件。

【问题讨论】：

【解决方案1】：

这种方法可能有效，但不推荐。 而且，在 CLI 生成的项目中，强烈建议在 assets 文件夹中添加样式

假设路径是'./assets/css/styles.css'

确保您的路径正确

推荐的做法是 -

在 angular-cli.json 样式数组 'apps[0].styles' 中添加以下内容

"styles": [
  ...
  "./assets/css/styles.css"
  ...
]

确保您的（.angular-cli.json 中的默认样式扩展名）是

"defaults": {
  "styleExt": "css"
}

使用npm start 重新运行会起作用

更新

"defaults": {"styleExt": } 用于生成组件。如果样式在不改变这一点的情况下工作正常，那就继续吧。原因见cmets

【讨论】：

您可以将任何 css 文件添加到样式数组中，即使您的默认 ext 是 css 或更少
可以，默认ext是在生成组件时生成样式文件。不知道这是否已修复，但是当我在项目中将默认 ext 作为 css 时，我在编译 scss 时遇到了问题。补充说是为了安全起见。感谢您指出这一点。 @TiepPhan
只需将 css 文件夹移动到资产即可解决问题。非常感谢赛亚夫
希望您使用 .angular-cli.json 链接它，因为即使您的方法（在 index.html 中链接）工作正常，也不建议这样做。非常欢迎你，也很高兴编码@KOul

【解决方案2】：

只需ng new，然后用于开发运行ng serve，用于生产运行ng build 或ng build --prod，Angular CLI 将为您注入 css、js 外部链接。

你不需要指定css链接 index.html

【讨论】：