可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

This is my code in index.html

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

My css folder in in the same level as the index.html file

I'm getting this error for each stylesheet I added (from 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.

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

回答1:

@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.

"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 serve again and its working. Make sure you have done it and restared server and if still problem persists please let me know, I would be glad to help you.Thanks.

回答2:

Solution 1 (with Bootstrap installed)

All you need to do is:

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

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

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

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

Here is an Awesome tutoral

Solution 2 (with Bootstrap referenced)

All you need to is:

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

2) Add this line at the top:

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

Here is Angular docs

回答3:

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

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

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

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

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.

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

Solution

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

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

<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.

回答4:

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.