【问题标题】：Mime type error when adding a CSS file to Angular将 CSS 文件添加到 Angular 时出现 Mime 类型错误
【发布时间】：2018-07-09 08:54:20
【问题描述】：

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

这是我在index.html中的代码

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

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

我添加的每个样式表都出现此错误（来自 ng serve with chrome）

拒绝应用来自 '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

【问题讨论】：

你应该添加相对路径"./css/layers.css"
mmm.. 仔细检查你的样式的路径...记住 angular.cli json 文件从 src 文件夹开始..
您可以通过在地址栏中输入localhost:4200/css/layers.css 来将样式表加载到浏览器中吗？如果可行，浏览器会报告 MIME 类型是什么？
嘿@Aravind，试过./css.. 和同样的问题????。 @Mr Lister，我无法直接访问 css。可能由于这个 MIME 类型问题而无法加载？
@sameera207 你能解决这个问题吗？

标签： css angular mime-types

【解决方案1】：

解决方案 1（安装了 Bootstrap）

您需要做的就是：

转到 Angular 应用根目录下的 .angular-cli.json。
修改样式数组以在styles.css之前包含引导程序

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

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

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

这是Awesome tutorial

解决方案 2（引用 Bootstrap）

您需要做的就是：

转到 Angular 应用根目录下的 styles.css。
在顶部添加这一行：

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

这里是Angular docs

【讨论】：

【解决方案2】：

@sameera207 cmets 中的答案是正确的，相对路径必须有效，我也有同样的问题，cmets 的答案对我有用。我试图重现您的错误，我在 index.html 级别创建了 css 文件夹并添加了 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 并且它的工作。请确保您已完成并重新启动服务器，如果问题仍然存在，请告诉我，我很乐意为您提供帮助。谢谢。

【讨论】：

【解决方案3】：

如果您在 angularcli.json 或 angular.json 中已经有 styles.css，则在 index.html 中不需要它。 cli 将自动注入内容。因此，从 index.html 中删除该行，一切都会正常工作。

【讨论】：

【解决方案4】：

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

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

假设我们有 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 中使用的库。

【讨论】：

【解决方案5】：

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

我已按照 npm 包安装中给出的说明，并在 index.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服务器，以后可以感谢我

仅供参考：Angular - V8.x，material-icons - V0.3.1

谢谢

【讨论】：

【解决方案6】：

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

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

【讨论】：

这是唯一对我有用的答案。我仍然想知道它为什么会起作用，因为它抱怨 MIME 类型是 ('text/html') 开始。

【解决方案7】：

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

是的，@Franklin，虽然付费应用让我一再看起来像一个健忘的老人，但很奇怪。 ;-) 但可能与系统相关。

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

“运行 >> gulp build

为我工作。（再次;-)）

【讨论】：

【解决方案8】：

这是链接您的 layers.css 文件的代码。

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

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

所以，代码会变成：

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

使用这条线，我希望它现在可以工作。谢谢你

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

我尝试使用 ng serve 通过 asp.net 零运行 Angular 代码，但遇到了这个问题。

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

“extractCss”：假，

喜欢这个

"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": [
...

【讨论】：

【解决方案13】：

从 index.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"
        ],

最后，重启应用。 ng 服务

【讨论】：

【解决方案14】：

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

src/styles.css

并且在 index.html 文件中我错误地添加了这个

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

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

【讨论】：