将 CSS 文件添加到 Angular 时出现 MIME 类型错误

Question

我正在尝试使用Angular构建一个静态站点。我想要的是将一些全局 css/js/图像文件添加到index.html

这是我的代码index.html

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

我的css文件夹与index.html文件处于同一级别

我添加的每个样式表都收到此错误(来自带有铬的 ng 服务)

拒绝应用"http://localhost:4200/css/layers.css"中的样式，因为其 MIME 类型("text/html")不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

我也试过添加这个

#.angular-cli.json
"styles": [
"styles.css",
"css/layers.css"
],

我该如何解决这个问题？

我的角度设置是

Angular CLI: 1.6.5
Node: 8.1.4
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Answer 1

解决方案 1(安装了引导程序)

您需要做的就是：

1. 转到 angular 应用程序根目录下的 .angular-cli.json。

2. 修改样式数组以在样式之前包含引导程序.css

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

注意：引导的路径是相对于/src/index.html这就是为什么您需要在node_modules之前"../"。

3. 退出 ng serve 的当前会话并重新启动它。

这是一个很棒的教程

解决方案 2(引用引导程序)

您需要做的就是：

1. 转到样式.css在角度应用的根目录下。

2. 在顶部添加此行：

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

这是 Angular 文档

Answer 2

如果你已经在 angularcli.json 或 angular.json 中拥有样式.css则不需要它在 index.html 中。CLI 将自动注入内容。因此，请从索引中删除该行.html一切正常。

Answer 3

对于将面临相同问题的人。

此错误消息的常见原因是当浏览器尝试加载该资源时，服务器会返回一个 HTML 页面。例如，如果您的路由器捕获未知路径并显示没有404 error.的默认页面 当然，这意味着路径不会返回预期的CSS file / image / icon /...参考来自这里

假设我们有Angular 6具有如下文件结构的项目：

project
|-src
|-app
|-assets
|-environments 
|----

假设我们需要将一个theming文件夹(包含 CSS 文件)直接放在 SRC 文件夹中。

project
|-src
|-app
|-assets
|-environments
|-vendor // Theming
|-theme-light.css
|theme-dark.css

如果我们尝试像这样访问该主题文件：

<link rel="stylesheet" type="text/css" href: '../vendor/theme-dark.css'>

将引发错误。

拒绝应用样式 "http://localhost:4200/vendor/theme-dark.css"，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且严格 MIME 检查已启用。

如果我们将该 url 粘贴到浏览器中，它不会提供纯 css 文件，因为路径错误。

溶液

所以你需要做的是找到正确的路径。(我们可以通过过去发现url浏览并查看将返回的内容)

在这种情况下，输入../src/引用将修复错误

<link rel="stylesheet" type="text/css" href: '../src/vendor/theme-dark.css'>

注意：确切的路径和路由器配置取决于您设置项目的方式以及与 Angular 一起使用的库。

Answer 4

@sameera207 评论中的答案是正确的，相对路径必须有效，我也有同样的问题，评论的答案对我有用。我试图重现您的错误，我在索引级别制作了 css 文件夹.html并添加了 css 文件，然后在样式数组中添加了路径。

"styles": [
"styles.css",
"./css/my-styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/tether/dist/css/tether.min.css"
],

然后重新启动服务器，我的意思是再次执行ng serve并正常工作。确保您已完成并重新设置服务器，如果问题仍然存在，请告诉我，我很乐意为您提供帮助。谢谢。

Answer 5

尝试添加

<base href="/">

在index.html的所有风格中名列前茅; 它对我有用

Answer 6

当我使用终端npm i -S material-icons安装材料图标时，我遇到了同样的问题。

我已经按照 npm 包安装中给出的说明进行操作，并在索引中放置了一个链接.html例如<link rel="stylesheet" type="text/css" href=<node_module_path/material-icons/iconfont/material-icons.css>

它抛出了its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

您必须实际将 href 中提到的路径粘贴到angular.json数组下的文件中styles

别忘了重启 angular 服务器，以后可以感谢我

仅供参考：角度 - V8.x，材质图标 - V0.3.1

谢谢

Answer 7

(*注意：关于 asp.net 样板零(付费版本)，但也可能是您的解决方案*)

是的，@Franklin，很奇怪，虽然对于付费应用程序来说，让我反复看起来像一个健忘的老人。但可能与系统相关。

我确实发现： support.aspnetzero.com/QA/Questions/7742/Refused-to-apply-style-from- ：

"在终端上运行>>gulp build<<命令并重新创建缩小的文件">

为我工作。(再次 ;-)

)

Answer 8

在你的angular.json中，添加配置选项

"提取Css"：假，

喜欢这个

"options": {

"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"extractCss": false,
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
...

Answer 9

我的角度项目中遇到了相同类型的错误。添加这段type="text/html"代码后，错误消失了。

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

Answer 10

这是链接图层.css文件的代码。

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

请从此行中删除type="text/css"。

因此，代码将变为：

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

使用这一行，我希望它现在能工作。谢谢

Answer 11

在资产文件夹中创建新的CSS文件夹，然后将CSS文件放入CSS中，然后再次链接到新位置

Eg : -  <link rel="stylesheet" href="assets/css/materialize.min.css"> 

Answer 12

我尝试使用 ng serve 通过 asp.net 零来运行角度代码并遇到了这个问题。

通常，所有角度项目都使用命令ng serve运行。但是 asp.net 零框架最初缩小了css文件，然后执行ng服务过程。这两件事集成在命令 npm start 中。如果至少完成一次 npm 启动，缩小的文件将存储在我们的本地...所以下次以后即使你做ng发球，它也会起作用。

所以运行npm start为我解决了这个问题。

Answer 13

有这个问题，因为我定义了相同的 *.css 文件， 在 *.html 和 angular.json 文件中 在角度上

Answer 14

从索引中删除此行.html

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

然后转到angular.json(因为angular 5)或angular-cli.json取决于您的版本。 在样式数组中设置 CSS 文件的路径，如下所示

"styles": [
"src/style1.css",
"src/style2.css"
],

最后，重新启动应用程序。

Answer 15

检查名称文件和路径是否正确，在我的角度中，我在数组 css 下有

src/styles.css

在索引.html文件中，我错误地添加了这个

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

风格.css在我的情况下不存在，但styles.ccs是的。

Answer 16

第 1 步： 使用以下详细信息更新您的 angular.json。

"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]

第 2 步： 确保索引.html没有"css"和"js"导入/引用。

Answer 17

我刚刚遇到了同样的问题，只需将它们从 node_modules 文件夹移动到断言文件夹即可解决。 例如。。。

<script  type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/dist/css/bootstrap.min.css" />
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />

Answer 18

添加<base href="/">在index.html的所有风格中名列前茅;为我工作