无法在 Angular cli 新项目中加载样式答案

【问题标题】：cannot load styles in angular cli new project无法在 Angular cli 新项目中加载样式
【发布时间】：2019-04-26 16:03:51
【问题描述】：

我刚刚使用 angulari cli 创建了一个新项目。

当我尝试在 index.html 中包含 styles.css 文件时

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

我在 Chrome 的开发工具网络标签中收到了这个：

Refused to apply style from 'http://localhost:4200/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

关于如何解决这个问题的任何想法？我使用ng serve在本地运行

我也尝试添加

./styles.css
/styles.css
styles.css

【问题讨论】：

您是否尝试过不添加链接？ css 将在运行时编译并包含。
是的，实际上您不需要将它们添加到您的 html 中。在您的 angular-cli.json 上，您可以添加它。但是已经添加了 CLI 创建的样式

标签： css angular google-chrome angular-cli

【解决方案1】：

当我们创建 angular-cli 项目时，styles.css 将应用默认值，您可以在 .angular-cli.json 中看到

app: {
styles:[
  "styles.css"
]

}

如果需要，您可以在此处根据您的项目添加更多样式。

【讨论】：

【解决方案2】：

我刚刚注意到它是通过一些服务器对 js 文件的请求自动加载的。所以它是通过javascript加载样式。

【讨论】：

【解决方案3】：

对于新版本的 Angular cli，您不再需要包含以下行

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

在 index.html 文件中。 cli 将自动注入内容。所以从 index.html 中删除该行，一切都应该正常工作。

如果您需要 style.css，只需在 angular-cli.json 中声明如下

 "styles": [
        "styles.scss",
      ],

【讨论】：