无法在 angular 6 应用程序中加载 css 文件

Question

我正在尝试在我的 angular 6 应用程序中添加基本重置样式。但是我在控制台中不断收到以下错误。

**

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

**

如您所见，我的 css 文件名为 reset.css，我正在使用 index.html 中的以下行来添加此文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EasyNotes</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  **<link rel="stylesheet" type="text/css" href="app/style-components/reset.css">**
</head>
<body>
  <app-root></app-root>
</body>
</html>

我是 angular 这个新版本的新手，它对我来说是个障碍。提前致谢:)

Answer 1

我认为在运行时找不到该文件，因此返回 Html 错误页面（或类似页面）。将文件放入 assets 文件夹并像这样引用它：

href="assets/reset.css"

要检查这一点，请打开浏览器并访问您的页面，按 F12，单击 Network，然后按 F5 重新加载。查看文件 Http 状态。

您也可以将它放在其他地方并在 angular.json 文件中引用它，在 styles 部分中并将其从 index.html:

中删除

"styles": [
   "src/app/style-components/reset.css"
],

Answer 2

这是关于与您类似的问题的好方法。

此错误消息的通常原因是，当浏览器尝试加载该资源时，服务器 return 改为 HTML 页面，例如，如果您的路由器捕捉到未知路径并显示没有 404 错误的默认页面。当然，这意味着路径不 return 预期的 CSS 文件/图像/图标/任何...

解决方案是找到正确的路径和路由器配置，以便在访问该路径时获得纯 CSS 文件/图像/等。

无法在 angular 6 应用程序中加载 css 文件

unable to load the css file in angular 6 application

angular

angular6