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

Question

提问by sameera207

I'm trying to build a static site using Angular. What I want is to have some global css/js/image files to be added to the index.html

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

This is my code in index.html

这是我的代码 index.html

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

My cssfolder in in the same level as the index.htmlfile

我css在同一级别的文件夹index.html文件

I'm getting this error for each stylesheet I added (from ng serve with chrome)

对于我添加的每个样式表，我都会收到此错误（来自 ng serve with chrome）

Refused to apply style from 'http://localhost:4200/css/layers.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

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

I've tried adding this too

我也试过添加这个

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

How can I fix this?

我怎样才能解决这个问题？

My angular setup is

我的角度设置是

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

回答by shireef khatab

Solution 1 (with Bootstrap installed)

解决方案 1（安装了 Bootstrap）

All you need to do is:

您需要做的就是：

1) Go to .angular-cli.json under the root directory of your angular app.

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

2) Modify the styles array to include bootstrap before styles.css

2）修改styles数组，在styles.css之前包含bootstrap

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

Note: the path to bootstrap is relative to /src/index.html that's why you need "../" before node_modules.

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

3) Exit the current session of ng serve and start it again.

3）退出ng serve当前会话，重新启动。

Here is an Awesome tutoral

这是一个很棒的教程

Solution 2 (with Bootstrap referenced)

解决方案 2（参考 Bootstrap）

All you need to is:

您只需要：

1) Go to styles.css under the root directory of your angular app.

1) 转到 angular 应用程序根目录下的 style.css。

2) Add this line at the top:

2）在顶部添加这一行：

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Here is Angular docs

这是Angular 文档

Answer 2

回答by sajal rajabhoj

@sameera207 Answers in comments are correct, relative path must work, I too had same issue and answers of comments are working for me. I tried to reproduce your error, I made css folder at level of index.html and added css file then added path in styles array.

@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"
  ],

then restarted server, I mean performed ng serveagain and its working. Make sure you have done it and restared serverand if still problem persists please let me know, I would be glad to help you.Thanks.

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

Answer 3

回答by arun kumar

If you already have the styles.css in angularcli.json or angular.json, you don't need it in index.html. The cli will inject the contents automatically. So remove that line from the index.html and everything should work.

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

Answer 4

回答by Ram Chandra Neupane

For someone who will face same problem.

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

The usual reason for this error message is 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.Of course that means the path does not return the expected CSS file / image / icon /whatever... ref from here

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

Lets assume we have Angular 6project with a file structure like this:

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

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

lets assume we need to put a themingfolder (that contains css files) directly inside src folder.

假设我们需要将一个theming文件夹（包含 css 文件）直接放在 src 文件夹中。

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

if we tried to access that theme file like this:

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

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

an error will be thrown.

将抛出错误。

Refused to apply style from 'http://localhost:4200/vendor/theme-dark.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

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

If we paste that url in the browser, it will not give the plain css file because the path is wrong.

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

Solution

解决方案

So What you need to do is find the correct path. (we can find out by past that urlin the browse and see what will returned)

所以你需要做的是找到正确的路径。（我们可以url在浏览中找到过去，看看会返回什么）

In whis case putting ../src/reference will fix the error

在这种情况下，放置../src/参考将修复错误

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

Note:The exact path and router configuration depends on how you have setup your project and the libraries you are using with Angular.

注意：确切的路径和路由器配置取决于你如何设置你的项目和你在 Angular 中使用的库。

Answer 5

回答by Sajid Javed

This is your code which links your layers.css file.

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

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

From this line please remove type="text/css".

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

So, the code will become:

所以，代码将变成：

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

Use this line, I hope It will work now. Thank You

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

Answer 6

回答by isuru welagedara

make new CSS folder inside the assets folder then put your CSS file inside CSS then link again with the new location

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

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

Answer 7

回答by Harsha Chinni

I had the same issue when I have installed material-icons using npm i -S material-iconsfrom the terminal.

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

I have followed the instructions given in the npm package installation and have placed a link in the index.html like <link rel="stylesheet" type="text/css" href=<node_module_path/material-icons/iconfont/material-icons.css>

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

It has thrown a its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

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

You have to actually paste the path mentioned in href in angular.jsonfile under stylesarray

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

Don't forget to restart the angular server, you can thank me later

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

FYI: Angular - V8.x, material-icons - V0.3.1

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

Thanks

谢谢

Answer 8

回答by Franklin Pious

I tried to run an angular code by asp.net zero using ng serve and faced this issue.

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

Normally all angular project run with the command ng serve. But the asp.net zero framework initially minifies the css file and then do the ng serve process..these 2 things are integrated in the command npm start. If atleast once npm start is done, the minified files are stored in our local... So next time onwards even if you do ng serve , it would be working..

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

So running npm startfixed the issue for me.

所以跑步npm start为我解决了这个问题。

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

提问by sameera207

回答by shireef khatab

Solution 1 (with Bootstrap installed)

解决方案 1（安装了 Bootstrap）

Solution 2 (with Bootstrap referenced)

解决方案 2（参考 Bootstrap）

回答by sajal rajabhoj

回答by arun kumar

回答by Ram Chandra Neupane

回答by Sajid Javed

回答by isuru welagedara

回答by Harsha Chinni

回答by Franklin Pious

相关推荐

最近更新

标签

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

提问by sameera207

回答by shireef khatab

Solution 1 (with Bootstrap installed)

解决方案 1（安装了 Bootstrap）

Solution 2 (with Bootstrap referenced)

解决方案 2（参考 Bootstrap）

回答by sajal rajabhoj

回答by arun kumar

回答by Ram Chandra Neupane

回答by Sajid Javed

回答by isuru welagedara

回答by Harsha Chinni

回答by Franklin Pious

相关推荐

CSS Bootstrap 4，如何颠倒列的顺序？

CSS bootstrap 4 在中心对齐按钮

CSS Angular Material 中的造型垫选择

CSS 如何以及在何处使用 ::ng-deep？

相关推荐

最近更新

标签