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

时间：2018-01-30 12:53:55

标签： css angular mime-types

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

这是我在index.html

中的代码 
<link rel="stylesheet" type="text/css" href="css/layers.css">

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

我为我添加的每个样式表（来自带有chrome的ng服务）收到此错误

  

拒绝申请来自＆＃39; http://localhost:4200/css/layers.css＆＃39;因为它的MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表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

13 个答案:

答案 0 :(得分：7)

@ 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并且正常工作。确保你已经完成了它并且恢复服务器，如果问题仍然存在，请告诉我，我很乐意帮助你。谢谢。

答案 1 :(得分：7)

解决方案1（安装了Bootstrap）

您需要做的就是：

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

2）修改styles数组以包含在styles.css

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

注意：bootstrap的路径是相对于/src/index.html的，这就是你需要的原因＆＃34; ../"在node_modules之前。

3）退出当前的ng服务会话并重新开始。

这是Awesome tutoral

解决方案2（引用Bootstrap）

您需要的只是：

1）转到角度应用程序根目录下的styles.css。

2）在顶部添加此行：

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

这是Angular docs

答案 2 :(得分：3)

如果您已经添加了angularcli.json，则无需添加index.html cli将自动注入内容。因此，请从index.html中删除该行，然后一切都可以正常工作。

答案 3 :(得分：3)

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

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

假设我们有Angular 6个项目，其文件结构是这样的

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

假设我们需要将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'>

那会抛出一个错误

  

拒绝应用以下样式   “ http://localhost:4200/vendor/theme-dark.css”，因为它的MIME类型   （'text / html'）不是受支持的样式表MIME类型，也不是严格的MIME   检查已启用。

如果我们在浏览器中粘贴了该URL，由于路径错误，该URL将不会提供普通的CSS文件。

解决方案

因此，您需要做的是找到正确的路径。 （我们可以从中找出过去的url    浏览并查看返回的内容）

在这种情况下，放置../src/引用将解决错误

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

注意：确切的路径和路由器配置取决于您如何设置项目和所使用的框架。

答案 4 :(得分：3)

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

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

答案 5 :(得分：2)

在终端上使用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文件中

别忘了重启角度服务器，稍后您可以感谢我

FYI：Angular-V8.x，材质图标-V0.3.1

谢谢

答案 6 :(得分：0)

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

  

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

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

因此，代码将变为：

  

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

使用此行，希望它现在可以工作。谢谢

答案 7 :(得分：0)

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

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

答案 8 :(得分：0)

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

通常所有使用ng serve命令运行的角度项目。但是，asp.net零框架最初会缩小css文件，然后执行ng服务过程。这两个内容已集成到命令npm start中。如果至少完成一次npm启动，则缩小的文件将存储在我们的本地文件中。因此，下次再执行一次，即使您进行serv服务，它也能正常工作。

因此，运行npm start为我解决了这个问题。

答案 9 :(得分：0)

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

答案 10 :(得分：0)

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

答案 11 :(得分：0)

从 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 服务

答案 12 :(得分：0)

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

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

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

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

为我工作。 (再次;-))

相关问题
最新问题