Stylesheet not loaded because of MIME-type

问题:

I\'m working on a website that uses gulp to compile and browser sync to keep the browser synced with my changes.

The gulp task compiles everything properly, but on the website, I\'m unable to see any style, and the console shows this error message:

Refused to apply style from \'http://localhost:3000/assets/styles/custom-style.css\' because its MIME type (\'text/html\') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Now, I don\'t really understand why this happens.

The HTML includes the file like this (which I am pretty sure is correct):

<link rel=\"stylesheet\" type=\"text/css\" href=\"assets/styles/custom-style.css\"/>

and the stylesheet is a merge between bootstrap & font-awesome styles for now (nothing custom yet).

The path is correct as well, as this is the folder structure:

index.html
assets
|-styles
  |-custom-style.css

But I keep getting the error.

Any idea what it could be? Is this something (maybe a setting?) for gulp/browsersync maybe?

Any help is really appreciated, and feel free to ask for more details if needed.

Thanks

回答1:

Ok I think I found a solution and I\'m writing it here in case helps somebody else.

The issue i think it was with a CSS library starting with comments. While on dev, i do not minify files and i don\'t remove comments, this meant that the stylesheet started with some comments, causing it to be seen as something different from css.

Removing the library and putting it into vendor file (which is ALWAYS minified without comments) solved the issue.

Again, i\'m not 100% sure this is a fix, but it\'s still a win for me as it works as expected now.

回答2:

For Node.js applications, check your configuration:

app.use(express.static(__dirname + \'/public\'));

Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your html:

href=\"/css/style.css\">

If you did include a forward slash (/public/) then you can just do href=\"css/style.css\"

Hope that helps, Thanks

回答3:

make a folder just below/above style.css file as per angular structure and provide link like <link href=\"vendor/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\">

回答4:

This error can also come up when you\'re not referring to your css file properly.

For example, if your link tag is

<link rel=\"stylesheet\" href=\"styles.css\">

but your CSS file is named style.css (without the second s) then there is a good chance that you will see this error.

回答5:

I had this error for a bootstrap template.

<link href=\"starter-template.css\" rel=\"stylesheet\">

Then I removed the rel=\"stylesheet\" from the link, i.e.:

<link href=\"starter-template.css\">

And everything works fine. Try this if you are using bootsrap templates.

回答6:

I simply referenced the css file (an angular theme in my case) in the styles section of my angular 6 build configuration in angular.json

This does not answer the question but might be a suitable workaround, as it was for me. Hope it helps.

回答7:

In most cases, this could be simply the CSS file path is wrong. So the web server return status: 404 with some Not Found content payload of html type.

The browser follows this (wrong) path from <link rel=\"stylesheet\" ...> tag with the intention of applying CSS styles. But the returned content type contradicts so that it logs an error.

回答8:

I have changed my \'href\' -> \'src\'. So from this:

<link rel=\"stylesheet\" href=\"dist/photoswipe.css\">

to this:

<link rel=\"stylesheet\" src=\"dist/photoswipe.css\">

3 am here and it worked, dunno why right now but it did the job.

回答9:

Also for others using angular-cli and publishing to a sub-folder on the webserver, check this answer :

When you\'re deploying to non-root path within a domain, you\'ll need to manually update the <base href=\"/\"> tag in your dist/index.html.

In this case, you will need to update to <base href=\"/sub-folder/\">

https://github.com/angular/angular-cli/issues/1080

回答10:

Comments in your file will trip this. Some minifiers will not remove comments.

ALSO

If you use NodeJS and set your static files using express such as:

app.use(express.static(__dirname + \'/public\'));

You need to properly address the files.

In my case both was the issue so I prefixed my CSS links to \"/css/styles.css\"

Example:

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

回答11:

my problem is that I was using webpack and in my html css link I had a relative path, and anytime i would navigate to a nested page, that would resolve to the wrong path:

<link rel=\"stylesheet\" href=\'./index.css\'>

so the simple solution was to remove the . since mine is a single page app. like this:

<link rel=\"stylesheet\" href=\'/index.css\'>

so it always resolves to /index.css

回答12:

You can open the chrome tools, select the network tab, reload your page and find the file request of the css and look for what it have inside the file. Maybe you did something wrong when you merge the two libraries in your file, including some characters or headers not properly for css ?

回答13:

For Node.js application. Just use this after importing all the required mudules in your server file:

app.use(express.static(\".\"));

• express.static built-in middleware function in Express and this in your .html file: <link rel=\"stylesheet\" href=\"style.css\">

回答14:

I am getting the same issue and then I checked I wrote

<base href=\"./\"> in index.html

Then I changed to

<base href=\"/\">

then it works fine

回答15:

In my case when I was deploying the package live, I had it out of the public HTML folder, it was for a reason.

But apparently strict mime type check has been activated, I am not too sure if it\'s on my side or by the company I am hosting with.

But as soon as I moved the styling folder in the same directory as the index.php file I stopped getting the error, and styling was activated perfectly.

回答16:

As mentioned solutions in this post, some of solutions are worked for me but CSS does not apply on page.

Simply, I just moved the \"css\" directory into \"Assest/\" directory and everything works fine.

<link rel=\"stylesheet\" type=\"text/css\" href=\"assets/css/bootstrap.css\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"assets/css/site.css\" >

回答17:

One of the main reason for the issue, the CSS file which trying to load isn\'t valid CSS file. causes:- invalid MIME type, having Javascript code inside style sheet- (may occur due to incorrect webpack bundler config)

Check the file which you\'re trying to load is a valid CSS style sheet(Get the server URL of the file from network tab and hit in a new tab and verify)

Useful info for consideration when using inside body tag.

Though having link tag inside the body is not the standard way to use the tag. but we can use it for page optimization(more info: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) / if the business use case demands(When you serve the body of the content and server configured to have to render HTML page with content provided).

While keeping inside the body tag we have to add attribute itemProperty in link tag like <body> <!-- … --> <link itemprop=\"url\" href=\"http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye\" /> <!-- … --> </body>

more info on itemProperty have a look on : https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document

回答18:

If you are setting Styles in Javascript as:

    var cssLink = document.createElement(\"link\");
    cssLink.href = \"./content.component.scss\";
    cssLink.rel = \"stylesheet\";
   --> cssLink.type = \"html/css\";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

Then just change cssLint.type (denoted by arrow in above description) to \"MIME\"

   cssLink.type = \"MIME\";

Will help you to get rid of error

回答19:

I have had the same problem. if your project\'s structure is like the following tree, I recommend to do this:

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

In server.js add this code:

var path = require(\'path\')
var express = require(\'express\')
var app = express()

app.use(\'/assets\', express.static(path.join(__dirname, \"../assets\")));

Note: Path is built-in Node.JS module so it doesn\'t need to install this package via npm.

回答20:

Triple check the name and path of the file. In my case I had something like this content in the target folder:

lib
    foobar.bundle.js
    foobr.css

And this link:

<link rel=\"stylesheet\" href=\"lib/foobar.css\">

I guess that the browser was trying to load the js file and complaining about its mime type instead of giving me a file not found error.

回答21:

I had the same problem and after hours of debugging I found out that it is related to temporary files not able to be written. Go to admin > config > File system. Set correct temporary directory. Make sure your server has permission to write to that directory.

回答22:

I had this error, in Angular. The way I solved it was to put an ngIf on my link element so it didn\'t appear in the Dom until my dynamic URL was populated.

May be unrelated to OP a little but I ended up here looking for an answer

<link *ngIf=\"cssUrl\" rel=\"stylesheet\" type=\"text/css\" [href]=\"sanitizer.bypassSecurityTrustResourceUrl(cssUrl)\"> 

回答23:

I met this issue. - Refused to apply style from \'http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0\' because its MIME type (\'text/html\') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Change the path could solve this issue.

回答24:

the solution from this thread solved my problem

Not sure if this will help anyone, but if you are using angular-cli, I fixed this by removing the css reference from my index.html and adding it to the angular-cli.json file under the \"style\" portion. After restarting my webserver I no longer had that issue.

回答25:

Adding to a long list of answers, this issue also happened to me because I did not realize the path was wrong from a browser-sync point of view.

Given this simple folder structure:

package.json
app
  |-index.html
  |-styles
      |-style.css

the href attribute inside <link> in index.html has to be app/styles/style.css and not styles/style.css

回答26:

I had the same problem, and in my case it was due to the fact that I had manually tried to import (s)css files in the html file (like we always do with static websites), when in fact the files had to be imported in the entry point JS file used by webpack.

When the stylesheets were imported into the main JS file, rather than manually written in the HTML, it all worked as expected.

回答27:

resaving a .ts file (forcing ionic to rebuild) solved for me.

It doesn\'t really make sense... but as long as it works, who am I to judge?

Here I have seen this workaround: ionic/angular2 - Refused to apply style from 'http://localhost:8100/build/main.css' because its MIME type ('text/html') is not a supported