无法在Angular 6应用程序中加载css文件
[英]unable to load the css file in angular 6 application
问题描述
I am trying to add basic reset styles in my angular 6 application. 
我正在尝试在我的angular 6应用程序中添加基本的重置样式。 But i keep getting following error in console. 但是我一直在控制台中收到以下错误。
** **
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.
** **
As you can see my css files name is reset.css and i am using following line in index.html to add this file. 如您所见，我的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>
I am new to this new version of angular and its quite a blocker for me. 我是这个新版本的angular的新手，它对我来说是个阻碍。 thanks in advance :) 提前致谢 ：）
2 个解决方案
解决方案1
1 2018-12-02 16:11:02
Here's the good answer on similar problem like yours. 对于像您这样的类似问题，这是一个很好的答案 。
The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. 出现此错误消息的通常原因是，当浏览器尝试加载该资源时，服务器将返回HTML页面，例如，如果您的路由器捕获了未知路径并显示默认页面而没有404错误。 Of course that means the path does not return the expected CSS file / image / icon / whatever... 当然，这意味着该路径不会返回预期的CSS文件/图像/图标/任何内容。
The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path. 解决方案是找到正确的路径和路由器配置，以便在访问该路径时获得纯CSS文件/图像/等。
解决方案2
-3 已采纳 2018-06-03 13:17:21
I think the file is not found at runtime, so an Html error page (or similar) is returned. 我认为在运行时找不到该文件，因此返回了HTML错误页面（或类似错误）。 Put the file into the assets folder and reference it like: 将文件放入assets文件夹，并按如下方式引用它：
href="assets/reset.css"
To check this, open your browser and access your page, press F12 , click Network and press F5 to reload. 要检查这一点，请打开浏览器并访问您的页面，按F12 ，单击Network ，然后按F5重新加载。 Have a look at the files Http status. 看看文件Http的状态。
You may also put it somewhere else and reference it in the angular.json file, in the styles section and remove it from index.html : 您也可以将其放在其他位置，并在angular.json文件的styles部分中引用它，并将其从index.html删除：
"styles": [
"src/app/style-components/reset.css"
],
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.