無法在Angle CLI新項目中加載樣式

Question

我剛剛使用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

Answer 1

當我們創建angular-cli項目樣式時，css將應用默認值，您可以在.angular-cli.json中看到

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

}

在這里，您可以根據項目需要添加更多樣式。

Answer 2

我只是注意到它是通過一些服務器對js文件的請求自動加載的。 因此，它通過javascript加載樣式。

Answer 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",
      ],