Style sheet not loaded due to MIME type

Question

I am working on a site that uses gulp to compile and synchronize the browser in order to synchronize the browser with my changes.

The gulp task compiles everything correctly, but I don't see any style on the website, and the console shows the following error message:

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

Now I do not quite understand why this is happening.

HTML includes a file like this (which I'm sure is correct):

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

And the stylesheet is a fusion of Bootstrap and font-awesome styles at the moment (so far nothing special).

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

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

But I keep getting the error.

What could it be? Is this something (maybe setup?) For gulp / browsersync maybe?

Answer 1

The problem, I think, was with the CSS library starting with comments.

During development, I do not minimize files or delete comments. This meant that the stylesheet started with some comments, making it perceived as something different from CSS.

Removing the library and placing it in the vendor file (which is ALWAYS minimized without comment) solved the problem.

Again, I am not 100% sure that this is a fix, but for me it is still a victory, since it works, as expected.

Answer 2

For Node.js applications, check your configuration:

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

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

 href="/css/style.css"> 

If you included the slash ( /public/ ), then you can just do href="css/style.css" .

Answer 3

This error can also occur if you do not access your CSS file properly.

For example, if your link tag

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

but your CSS file is called style.css (without seconds), then there is a high probability that you will see this error.

Answer 4

Create a folder just below / above the style.css file in accordance with the angular structure and provide a link, for example, <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> .

Answer 5

In most cases, this may just be the wrong path to the CSS file . Thus, the web server returns status: 404 with some payload of Not Found html content.

The browser follows this (wrong) path from <link rel="stylesheet"...> in order to apply CSS styles. But the returned content type is contrary so that it logs an error.

Answer 6

I had this error for the Bootstrap template.

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

Then I removed rel="stylesheet" from the link, that is:

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

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

Answer 7

I changed my 'href' → 'src'. So from this:

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

to that:

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

It worked. I don’t know why, but he did his job.

Answer 8

I just referenced the CSS file (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 it may be a suitable workaround, as it was for me.

Answer 9

Comments in your file will work. Some minifire will not delete comments.

ALSO

If you use Node.js and install your static files using express for example:

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

You need to correctly access the files.

In my case, the problem was in both cases, so I put my CSS links with the prefix "/css/styles.css".

Example:

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

This solution is perfect, since the path is the main problem for CSS not getting rendered

Answer 10

As mentioned in this post, some solutions have helped me, but CSS is not applied on the page.

I just simply moved the "css" directory to the "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" > 

Answer 11

Also for others using Angular-CLI and posting in a subfolder on the web server, check this answer:

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

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

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

Answer 12

I had this problem with a site that I knew worked on the Internet when I moved it to localhost and PhpStorm.

This worked fine online:

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

But for localhost, I needed to get rid of the slash:

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

So, I am reinforcing several of the answers presented here already - most likely, it will be a path or spelling error, and not some complex problem with setting up the server. Error in the console - red herring; the network tab should be checked for 404 first.

Among the answers given here, there are several incorrect solutions. Adding type="text/html" or changing href to src not the answer.

If you want to have all the attributes so that they are validated on the most stringent validators and your IDE, then a media value should be provided, and rel should be a stylesheet , for example:

  <link rel="stylesheet" href="css/additional.css" type="text/css" media="all"> 

Answer 13

My problem is that I used a web package, and in my CSS HTML link I had a relative path, and at any time I would go to a subpage that would lead to the wrong path:

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

such a simple solution was to remove . since I have this one-page application .

Like this:

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

therefore always permitted in /index.css

Answer 14

You can open the Google Chrome tools, select the network tab, reload the page and find the CSS request file and see what it has inside the file.

Maybe you did something wrong when you combined the two libraries in your file, including some characters or headers that are not entirely suitable for CSS?

Answer 15

I had the same problem.

If your project structure is similar to the following tree:

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

I recommend adding the following code snippet to server.js :

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

Note. Path is a Node.js built-in module, so there is no need to install this package through npm.

Answer 16

I got the same problem and then I checked that I wrote:

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

Then i changed to

 <base href="/"> 

And then everything worked fine.

Answer 17

Adding to the long list of answers, this problem also occurred to me because I did not realize that the path was wrong in terms of browser synchronization.

Given this simple folder structure:

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

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

Answer 18

For a Node.js application, just use this after importing all the necessary modules into your server file:

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

• Express.static's built-in intermediate function in Express, and this is in your .html file: < link rel="stylesheet" href="style.css">

Answer 19

In my case, when I deployed the package live, it was in the public HTML folder. That was for a reason.

But apparently, strict MIME type checking has been activated, and I'm not too sure that she is on my side or in the company I work with.

But as soon as I moved the styles folder to the same directory as the index.php file, I stopped receiving the error message, and the styling was activated perfectly.

Answer 20

One of the main causes of this problem is that the CSS file that it is trying to load is not a valid CSS file.

Causes:

• Invalid MIME Type
• Presence of JavaScript code inside the stylesheet - (may be due to incorrect configuration of the Webpack packer)

Make sure the file you are trying to download is a valid CSS stylesheet (get the server URL for the file in the network tab, click the new tab and check).

Useful information to consider when using <link> inside the body tag.

Although using the link tag inside the body is not the standard way to use the tag. But we can use it to optimize the page (additional information: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / if the business scenario requires it (when you serve the content body and the server configured for should make an HTML page with the content provided).

itemProperty inside the body tag, we must add the itemProperty attribute to the link tag for example:

 <body> <!-- … --> <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" /> <!-- … --> </body>' 

For more information on itemProperty see https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

Answer 21

Remove rel = "stylesheet" and add type = "text / html". So it will look like this -

 <link href="styles.css" type="text/html" /> 

Answer 22

If you set styles in JavaScript like:

  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 (indicated by the arrow in the above description) to "MIME":

  cssLink.type = "MIME"; 

This will help you get rid of the error.

Answer 23

Bootstrap styles not loading # 3411

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

1. I installed Bootstrap v. 3.3.7

    npm install bootstrap --save 

2. Then I added the necessary script files to apps[0].scripts in the angular-cli.json file:

    "scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ], // And the Bootstrap CSS to the apps[0].styles array "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], 

3. I restarted ng to serve

It worked for me.

Answer 24

This problem occurs when you use the cli tool for responsiveness or for angular, so the key is to copy the entire final assembly from these tools, as they initialize their own lightweight servers, which confuses your URLs with the internal server you created .... take this entire build folder and put it in the assets folder of your internal server project and send them from your internal server, not from the server that comes with Angular or Reactjs. Otherwise, you use it as an external interface from a specific API server

Answer 25

If you use Express without JS, try:

 app.use(express.static('public')); 

As an example, my CSS file is located at public/stylesheets/app.css

Answer 26

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

 lib foobar.bundle.js foobr.css 

And this link:

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

I assume that the browser was trying to load a JavaScript file and complained about its MIME type instead of giving me a "file not found" error.

Answer 27

I had the same problem, and after several hours of debugging, I found that it was related to temporary files that could not be written.

Go to Admin → Config → File System. Install the correct temporary directory. Make sure your server has write permission to this directory.

Answer 28

I had this error in Angular. I solved this by putting ngIf in the link element so that it would not appear in the DOM until my dynamic URL was populated.

Perhaps this is not a bit related to AF, but I settled on finding an answer.

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

Answer 29

I met this problem.

I refused to apply the 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 MIME type of style sheet, and strict MIME checking is enabled.

Changing the path can solve this problem.

Answer 30

I had the same problem, and in my case it was due to the fact that I tried to manually import CSS files into an HTML file (as we always do with static sites), when in fact the files had to be imported into the entry point file JavaScript used by Webpack.

When the stylesheets were imported into the main JavaScript file, and not written manually in HTML, everything worked as expected.