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

Question

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

这是我的index.html代码:

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

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

我为每个我添加的样式表（通过使用chrome运行ng serve）都收到了这个错误：

拒绝应用来自'http://localhost:4200/css/layers.css'的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

我也尝试过添加这个：

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

我该如何修复这个问题？

我的Angular配置是

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

- sameera207

---

你应该添加相对路径 "./css/layers.css"。 - Aravind

嗯嗯..请再次检查您的样式路径...记得angular.cli json文件从src文件夹开始.. - federico scamuzzi

你能否通过在地址栏中键入http://localhost:4200/css/layers.css将样式表加载到浏览器中？如果可以，请问浏览器报告的MIME类型是什么？ - Mr Lister

嘿@Aravind，我尝试了./css..，但是出现了同样的问题。@Mr Lister，我无法直接访问CSS。也许这是由于MIME类型问题而无法加载？ - sameera207

@sameera207 你的意思是说，你无法直接访问CSS文件吗？你是否收到了404错误？如果是这样，那很可能就是问题的原因。 - Mr Lister

@sameera207 你解决了吗？ - Rusty

Answer 1

解决方案1（已安装Bootstrap）

您需要做的是：

1. 进入您的Angular应用程序根目录下的.angular-cli.json文件。

2. 修改styles数组，将Bootstrap包含在styles.css之前。

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

注意: bootstrap 路径相对于 /src/index.html，所以你需要在 node_modules 前加上 "../"。

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

这是一个很棒的教程

解决方案2（引用了Bootstrap）

你只需要:

1. 进入你的 Angular 应用根目录下的 styles.css 文件。

2. 在文件开头添加这一行：

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

这里是Angular文档

- shireef khatab

Answer 2

如果在angularcli.json或angular.json已经有styles.css，您就不需要在index.html中添加。CLI会自动注入内容。因此，请从index.html中删除该行代码，一切都应该正常工作。

- arun kumar

Answer 3

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

通常出现这个错误消息的原因是浏览器尝试加载资源时，服务器返回了一个HTML页面。例如，如果您的路由器捕获未知路径并显示默认页面，而没有 404错误，那么这意味着该路径无法返回预期的 CSS文件/图像/图标 等...参考来源

让我们假设我们有一个类似于这样的文件结构的 Angular 6 项目:

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

假设我们需要直接将一个包含CSS文件的 theming 文件夹放在 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'>

将抛出错误。

因其MIME类型（“text / html”）不是受支持的样式表MIME类型，并启用了严格的MIME检查， 拒绝应用来自'http://localhost:4200/vendor/theme-dark.css'的样式。

如果我们在浏览器中粘贴该网址，它将不会给出纯css文件，因为路径错误。

解决方法

所以您需要做的就是找到正确的路径。（我们可以通过将url粘贴到浏览器中并查看返回什么来找出）

在这种情况下，放置../src/引用将修复错误。

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

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

- Ram Chandra Neupane

---

谢谢！这是我们在更改webpack配置后遇到的问题。 - Georgi Stoimenov

Answer 4

@sameera207 在评论中的答案是正确的，相对路径必须能够工作。我也遇到过同样的问题，评论中的答案对我很有用。我尝试重现您的错误，我在 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，这样就能正常工作了。请确保你已经这样做并且重启了服务器，如果问题仍然存在，请告诉我，我很乐意帮助你。谢谢。

- sajal rajabhoj

Answer 5

尝试通过添加

<base href="/">

在 index.html 的所有样式表的顶部； 这对我很有效。

- piyush joshi

Answer 6

我在终端使用npm i -S material-icons安装material-icons时遇到了相同的问题。

按照npm软件包安装中给出的说明，我在index.html中添加了一个链接，如下所示：<link rel="stylesheet" type="text/css" href=<node_module_path/material-icons/iconfont/material-icons.css>

它会抛出一个错误：其MIME类型('text/html')不是受支持的样式表MIME类型，并启用了严格的MIME检查。

你需要在angular.json文件的styles数组中实际粘贴href中提到的路径。

别忘了重新启动angular服务器，以后再感谢我吧。

注：Angular - V8.x，material-icons - V0.3.1

谢谢

- Harsha Chinni

Answer 7

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

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

- Nazmul Hasan

---

这是唯一对我有效的答案。虽然它一开始抱怨 MIME 类型为 ('text/html')，但我仍想知道它为什么有效。 - user3132457

Answer 8

(*注意：以下内容涉及asp.net boilerplate zero（付费版本），但可能也适用于您的解决方案*)

是的，@Franklin，对于一个付费应用程序来说，让我一次又一次地看起来像一个健忘的老人确实很奇怪。;-) 但可能与系统有关。

我发现了这篇文章： support.aspnetzero.com/QA/Questions/7742/Refused-to-apply-style-from- :

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

对我有效。（再次 ;-)）

- Erik

Answer 9

在你的 angular.json 文件中，添加以下配置选项：

"extractCss": false,

像这样：

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

- Daniel Bentes

Answer 10

从 index.html 中删除这一行

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

然后进入angular.json（自Angular 5起）或angular-cli.json，具体取决于您的版本。在styles数组中设置您的CSS文件路径，如下所示：

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

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

- Angelus Roman