Stylesheet not loaded because of MIME-type

Question

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronised 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.

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

I was getting this when my linked stylesheet started with an html — Newclique, May 23 '18 at 01:01
It happens when you set an incorrect URL to the file or when your server isn't configured properly. In the result, the browser DOESN'T get the stylesheet, but it gets some HTML with 404 status and with the "Content-Type" header. Since the browser gets something from the server, it doesn't tell you there is no reply, but it tells you the MIME type of the file is incorrect. The fastest way to check it is just to try to open the file directly `http://localhost:3000/assets/styles/custom-style.css` in a new tab. — RussCoder, Sep 12 '18 at 07:08
For me it was the case RussCoder described. The reason behind this was that I used Angular and forgot to add a css file to the styles packaging in the angular.json. So it was ignored while building the app. — Jana, Jan 25 '19 at 12:08
I could be able to fix this issue by spring security configurations. It was blocking access to resource folder. — sndu, Jan 30 '19 at 14:57
A bad `proxy.conf.json` setup has led us to this weird error, since the request forwarding to the backend API was not working correctly, thus the HTML error response. — ktsangop, Jul 10 '19 at 07:29
This can be even a dump type/error as refer to that file.css with href instead of src as it was happening to me — Carmine Tambascia, Aug 30 '19 at 18:51
Would you please accept [my answer](https://stackoverflow.com/a/51917847/7310077)? — Mostafa Ghadimi, Sep 23 '19 at 18:59
In my case I had an error inside SCSS file (missing bracket) and it caused this issue, because the server couldn't reach correct CSS file. — Piotr Kowalski, Sep 10 '20 at 11:08
I would like to +1 to RussCoder and Jana's replies. In my PolymerJS (LitElement) project, I forgot to include the "styles.css" file in the "assets copy" step in the webpack config file. — Cristiansen, Nov 22 '20 at 14:31

score 206 · Answer 1 · edited Mar 04 '19 at 21:21

206

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

edited Mar 04 '19 at 21:21

Peter Mortensen

28,342
21
95
123

answered Feb 07 '18 at 14:54

JPaulino

2,337
1
6
7

1

href="/assets/style.css"> in my case solved the problem! – Sergio Guerjik Mar 01 '20 at 13:51

score 158 · Accepted Answer · edited Mar 04 '19 at 21:19

158

The issue, I think, was with a CSS library starting with comments.

While in development, 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 a 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.

edited Mar 04 '19 at 21:19

Peter Mortensen

28,342
21
95
123

answered Jan 15 '18 at 20:46

Nick

10,791
6
40
82

4

An half fix because if you don't want to put all this css in vendor, what should you do? Minimify node_modules each time you test your app? Doh... Did you find something to just compile a certain module? – SteamFire Mar 23 '18 at 14:01
1

In my compiling process, the vendor file is created only on build and then i just watch for changes on the files i'm actually working on (which is usually nothing that goes into vendor). This means that the first build is a bit slower, but then i just compile my files without minification which is not slowing up the process for me – Nick Mar 24 '18 at 09:50
3

I ran into this same issue and found that I was trying to load a minified version of the file that was present on the server as a non-minified file. So, I was trying to load "custom-style.min.css" when the file on the server was "custom-style.css". Once I changed my link to load the correct resource, everything worked fine. – Programmer Dan May 08 '18 at 15:35
The problem is not limited to CSS. I also got a 404 on a JS file which was caused by a comment in the first line. – Black Feb 28 '20 at 10:00

score 109 · Answer 3 · edited Mar 04 '19 at 21:32

109

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.

edited Mar 04 '19 at 21:32

Peter Mortensen

28,342
21
95
123

answered May 04 '18 at 11:34

John Deverall

4,206
2
25
33

6

Exactly what happened to me. I tried every answer here (change the mimetype, remove CSS comments, change the node.js config...). All I had to do was to fix a typo in the CSS name. Doh! – AJPerez May 23 '18 at 10:54
6

To add to this answer, be sure gulp actually found the css file and piped it into your dist. Whenever I get this error, it is because I screwed up my path to the css files somehow and it just doesn't exist in the build directory. – Jun 25 '18 at 19:37
6

Yep, same for me, a simple and stupid typo. I think what it does it that the server send a 404 response page, so your browser get that 404 page and tells you that it's not proper css... which is true. – tanou Oct 17 '18 at 06:53
FWIW, same issue happened to me when Sharepoint permissions were causing an Access Denied. I had to add Authenticated Users to the SP site. As always, THANKS to the Stack Overflow community for pointing me in the right direction. Cheers! – Joe Zamora Feb 26 '21 at 00:55
In my case, I did not upload the style.css to the server. Duh.. – RCW Apr 18 '21 at 10:01

score 97 · Answer 4 · edited Mar 04 '19 at 22:03

97

In most cases, this could be simply the CSS file path is wrong. So the web server returns 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.

edited Mar 04 '19 at 22:03

Peter Mortensen

28,342
21
95
123

answered Sep 01 '18 at 03:44

Tharaka

1,973
17
12

My issue was that the path was invalid. But, this bad path was caused by the base href set for my angular project being incorrect. If anyone else started seeing this error after updating your base href, it may be the cause. – Krejko Dec 14 '18 at 18:34
4

Thanks for taking the trouble to fully and clearly document how a 404 error on the CSS file can produce this (initially) puzzling error message – Velojet Jan 15 '19 at 01:11
6

another way to troubleshoot, paste the url you're getting this error on into another tab, if you're not seeing CSS, this is likely the issue – BlackICE Dec 11 '19 at 16:20
1

Than you for your hint – Jason Zhou Mar 14 '20 at 07:10

score 57 · Answer 5 · edited Mar 04 '19 at 22:00

57

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

edited Mar 04 '19 at 22:00

Peter Mortensen

28,342
21
95
123

answered Jul 25 '18 at 09:25

Amandeep Saini

641
5
9

3

Good catch. Error is gone now. – Rich Jul 29 '18 at 04:22
6

According to the [Living Standard (4.2.4)](https://html.spec.whatwg.org/multipage/semantics.html#attr-link-rel), *"A link element must have either a rel attribute or an itemprop attribute, but not both."* So, removing the `rel` attribute just removes the functionality of including a stylesheet. – Artjom B. Oct 17 '18 at 20:32

score 54 · Answer 6 · edited Mar 04 '19 at 21:24

54

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

edited Mar 04 '19 at 21:24

Peter Mortensen

28,342
21
95
123

answered Mar 09 '18 at 06:41

Gopi G.A

581
3
4

25

Why does this work? The error states that "text/html" is not a supported MIME type. – James Bateson Mar 27 '18 at 11:15
6

In my case the error went away, the css styles, however, are not applied.. :/ – Andru Apr 19 '18 at 14:35
2

I did spend aome more time reading about this issue and changing the type of a css file ibto something else can cause serious issues, like css being read as html by the server – Nick Apr 20 '18 at 04:42
In AngularDart, the root for index.html is the 'web' folder not the project main folder. So all the css files must be inside the web folder. Like this "[projectfolder]\web\[yourcssfileshere]". So if you try to import a css file located outside the web folder it will not be found. – Wael Sep 02 '19 at 12:17

Sebastian Voráč · Answer 7 · 2021-03-29T21:30:40.593

46

I have changed my href to src. So from this:

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

to this:

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

It worked. I don't know why, but it did the job.

edited Mar 29 '21 at 21:30

answered Sep 21 '18 at 00:56

Sebastian Voráč

571
5
8

1

Although it did work for me too, is this a valid attribute? – sr9yar Oct 31 '18 at 13:42
3

@sr9yar You are right that according to the https://validator.w3.org it is not valid to have src in link, so it is good as a quick hotfix, but as soon as you have a bit more time I would suggest to find another more valid workaround. – Sebastian Voráč Nov 13 '18 at 18:59

score 26 · Answer 8 · edited Jul 05 '19 at 18:24

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

ALSO

If you use Node.js 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 were the issue, so I prefixed my CSS links with "/css/styles.css".

Example:

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

This solution is perfect as the path is the main issue for CSS not getting rendering

score 20 · Answer 9 · edited Mar 04 '19 at 21:58

20

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 it might be a suitable workaround, as it was for me.

edited Mar 04 '19 at 21:58

Peter Mortensen

28,342
21
95
123

answered Jun 28 '18 at 09:05

dvlsc

414
5
11

4

Thats the correct answer for Angular-CLI 6 projects – Torsten Barthel Aug 07 '18 at 13:30

score 18 · Answer 10 · answered Feb 06 '20 at 09:04

I know it might be out of context but linking a non existed file might cause this issue as it happened to me before.

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

If this file does not exist you will face that issue.

score 17 · Answer 11 · edited Mar 04 '19 at 22:08

17

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

Simply, I just moved the "css" directory into 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" >

edited Mar 04 '19 at 22:08

Peter Mortensen

28,342
21
95
123

answered Oct 15 '18 at 12:00

Jitendra G2

1,036
7
14

Awesome (Y) fixed my problem – Chakri Nov 16 '18 at 08:28

score 13 · Answer 12 · edited Mar 04 '19 at 21:25

13

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

When you're deploying to a 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

edited Mar 04 '19 at 21:25

Peter Mortensen

28,342
21
95
123

answered Mar 19 '18 at 16:07

simonberry

750
7
20

score 13 · Answer 13 · edited Mar 04 '19 at 22:15

I had this problem with a site I knew worked online 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 a few answers provided here already - it is likely to be a path or spelling mistake rather than any complicated server setup problem. The error in the console is a red herring; the network tab needs to be checked for the 404 first.

Among the answers provided here are a few solutions that are not correct. The addition of type="text/html" or changing href to src is not the answer.

If you want to have all of the attributes so it validates on the pickiest of validators and your IDE then the media value should be provided and the rel should be stylesheet, e.g.:

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

score 13 · Answer 14 · edited Oct 01 '20 at 09:10

13

In addition to using:

<base href="/">

Also remove the rel="stylesheet" part from your css links:

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

edited Oct 01 '20 at 09:10

Dharman

21,838
18
57
107

answered Oct 01 '20 at 09:04

Murat Yıldız

9,619
6
51
58

score 12 · Answer 15 · edited Mar 04 '19 at 21:22

12

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

Like this:

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

so it always resolves to /index.css

edited Mar 04 '19 at 21:22

Peter Mortensen

28,342
21
95
123

answered Feb 18 '18 at 22:05

Jared

2,439
23
36

Yes, in my case, I forgot to remove these relative paths from my index.html file and was running webpack in the production mode. These paths are not needed as webpack links the css files dynamically through the webpack.prod.js. – Kewal Shah May 04 '20 at 12:50

score 11 · Answer 16 · edited Mar 04 '19 at 21:26

11

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

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

Then I changed to

<base href="/">

And then it worked fine.

edited Mar 04 '19 at 21:26

Peter Mortensen

28,342
21
95
123

answered Apr 04 '18 at 06:13

VIKAS KOHLI

6,488
3
37
45

Mostafa Ghadimi · Answer 17 · 2019-06-26T22:40:18.923

I have had the same problem.

If your project's structure is like the following tree:

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

I recommend to add the following piece of code in 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 built-in Node.js module, so it doesn't need to install this package via npm.

score 8 · Answer 18 · edited Mar 04 '19 at 21:17

8

You can open the Google 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 merged the two libraries in your file, including some characters or headers not properly for CSS?

edited Mar 04 '19 at 21:17

Peter Mortensen

28,342
21
95
123

answered Jan 14 '18 at 11:00

Yunior González Santana

89
3

1

unfortunately i did try it but it is not really helping, the request fails instantly and it only has the request url (which is correct) – Nick Jan 14 '18 at 11:02

Stig Perez · Answer 19 · 2018-10-13T19:33:20.220

8

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

edited Oct 13 '18 at 19:33

answered Oct 07 '18 at 19:26

Stig Perez

3,143
3
20
32

Indeed , just a typo in the path gave me this same error. – Julesezaar Apr 23 '19 at 08:42
wow this worked for me, thank you so much. I was literally about to give up – Vash Oct 26 '19 at 04:23

score 8 · Answer 20 · edited Oct 11 '19 at 06:01

8

In case you using Express with no JS try with:

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

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

edited Oct 11 '19 at 06:01

Carles Alcolea

7,984
4
30
51

answered Aug 06 '19 at 07:30

Tal Hakmon

359
3
5

score 6 · Answer 21 · answered Mar 30 '20 at 12:20

by going into my browsers console > network > style.css ...clicked on it and it showed "cannot get /path/to/my/CSS", this told me my link was wrong. i changed that to the path of my CSS file.

Original path before change was localhost:3000/Example/public/style.css changing it to localhost:3000/style.css solved it.

if you are serving the file from app.use(express.static(path.join(__dirname, "public"))); or app.use(express.static("public")); your server would pass "that folder" to the browser so adding a "/yourCssName.css" link in your browser solves it

By adding other routes in your browser CSS link, you'd be telling the browser to search for the css in route specified.

in summary... check where your browser CSS link points to.

score 5 · Answer 22 · edited Mar 04 '19 at 21:23

5

For a Node.js application, just use this after importing all the required modules 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">

edited Mar 04 '19 at 21:23

Peter Mortensen

28,342
21
95
123

answered Mar 05 '18 at 05:42

Purav Barot

61
2

4

You don't really want to serve you server code to the public do you ? – Ki Jéy Aug 10 '18 at 12:16

Shapon Pal · Answer 23 · 2021-02-17T13:08:49.333

How I solved this. For Node.js applications, you need to set your **public** folder configuration.

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

Otherwise, you need to do like href="public/css/style.css".

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

Note: It will work for http://localhost:3000/public/assets/css/custom.css. But couldn't work after build. You need to set app.use(express.static(__dirname + '/public')); for Express

score 4 · Answer 24 · edited Mar 04 '19 at 21:31

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 a strict MIME type check has been activated, and 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.

score 4 · Answer 25 · answered Jan 10 '19 at 08:23

4

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

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

answered Jan 10 '19 at 08:23

Sanjay Choubey

100
5

score 4 · Answer 26 · edited Mar 04 '19 at 22:09

Bootstrap styles not loading #3411

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

I installed Bootstrap v. 3.3.7
```
npm install bootstrap --save
```

Then I added the needed 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"
],

I restarted ng serve

It worked for me.

score 4 · Answer 27 · answered Nov 04 '19 at 10:31

4

if browser can not find related css file, it could give this error.

If you use Angular application you do not have to put css file path on index.html

 <link href="xxx.css" rel="stylesheet"> -->

You could put related css file path on styles.css file.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

answered Nov 04 '19 at 10:31

Ahmet Arslan

3,649
1
23
29

This was the fix for me, remove the link href from index.html and used the import method in the styles.scss. – IronWorkshop Nov 15 '19 at 03:49

score 4 · Answer 28 · answered Nov 22 '19 at 11:52

4

I was working with the React.js app and also had this error which led me here. This is what helped me. Instead of adding <link> to the index.html I added an import to the component where I need to use this stylesheet:

import 'path/to/stylesheet.css';

answered Nov 22 '19 at 11:52

Alex Gongadze

81
4

manbradcalf · Answer 29 · 2020-09-14T15:55:37.643

This is specific to Typescript+Express

I ctrl+f'd "Typescript" and ".ts" and found nothing in these answers, so I'll add my solution here, since it was caused by (my inexperience with) typescript, and the solutions I've read don't explicit solve this particular issue.

The problem was that Typescript was compiling my app.ts file into a javascript file in my project's dist directory, dist/app.js

Here's my directory structure, see if you can spot the problem:

├── app.ts
├── dist
│   ├── app.js
│   ├── app.js.map
│   └── js
│       ├── dbclient.js
│       ├── dbclient.js.map
│       ├── mutators.js
│       └── mutators.js.map
├── public
│   ├── css
│   │   └── styles.css
├── tsconfig.json
├── tslint.json
└── views
    ├── index.hbs
    └── results.hbs

My problem is that in app.ts, I was telling express to set my public directory as /public, which would be a valid path if Node actually were running Typescript. But Node is running the compiled javascript, app.js, which is in the dist directory.

So having app.ts pretend it's dist/app.js solved my problem. Thus, I fixed the problem in app.ts by changing

app.use(e.static(path.join(__dirname, "/public")));

to

app.use(e.static(path.join(__dirname, "../public")));

score 3 · Answer 30 · edited Mar 04 '19 at 21:57

One of the main reasons for the issue is the CSS file which is trying to load isn't a valid CSS file.

Causes:

Invalid MIME type
Having JavaScript code inside style sheet - (may occur due to incorrect Webpack bundler configuration)

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

Useful info for consideration when using <link> inside the body tag.

Though having a link tag inside the body is not the standard way to use the tag. But we can use it for page optimization (more information: 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 the HTML page with content provided).

While keeping inside the body tag we have to add the attribute itemProperty in the link tag like

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

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

score 3 · Answer 31 · edited Mar 04 '19 at 22:01

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

It will help you to get rid of the error.

score 3 · Answer 32 · answered Mar 11 '19 at 11:20

This issue happens when you're using cli tool for either reactjs or angular, so the key is to copy the entire final build from those tools since they initialize they're own lite servers which confuses your URLs with back end server you've created... take that whole build folder and dump it on asset folder of your back end server project and ref them from your back end server and not the server which ships with Angular or Reactjs Otherwise you're using it as front end from a certain API server

score 2 · Answer 33 · edited Mar 04 '19 at 22:05

2

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.

edited Mar 04 '19 at 22:05

Peter Mortensen

28,342
21
95
123

answered Oct 05 '18 at 02:51

newbie

797
1
7
16

score 2 · Answer 34 · answered Jul 24 '19 at 15:20

I came across this issue having the same problem adding a custom look and feel to an Azure B2C user flow. What I found was that the root that the html page referred to was ../oauth/v2 (i.e. the oauth server path) rather than the path to my storage bob.

Putting in the full url of the pages fixed the problem for me.

score 2 · Answer 35 · answered Aug 05 '19 at 08:36

Check if you have a compression enabled or disabled. If you use it or someone enabled it then app.use(express.static(xxx)) won't help. Make sure your server allows for compression.

I started to see the similar error when I added Brotli and Compression Plugins to my Webpack. Then your server needs to support this type of content compression too.

If you are using Express then the following should help:

app.use(url, expressStaticGzip(dir, gzipOptions)

Module is called: express-static-gzip

My settings are:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}

score 2 · Answer 36 · answered Jan 14 '20 at 19:18

2

In my case I had to both make sure that the link was relative and the rel property was after the href property:

<link href="/assets/styles/iframe.css" rel="stylesheet">

answered Jan 14 '20 at 19:18

David Jarrin

1,177
2
15
35

score 1 · Answer 37 · edited Mar 04 '19 at 21:33

1

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 JavaScript file and complaining about its MIME type instead of giving me a file not found error.

edited Mar 04 '19 at 21:33

Peter Mortensen

28,342
21
95
123

answered May 09 '18 at 16:35

pasx

1,958
21
21

score 1 · Answer 38 · edited Mar 04 '19 at 21:51

1

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.

It may be unrelated to the OP a little bit, but I ended up here looking for an answer.

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

edited Mar 04 '19 at 21:51

Peter Mortensen

28,342
21
95
123

answered Jun 05 '18 at 01:40

SeanMC

1,079
1
11
26

score 1 · Answer 39 · edited Mar 04 '19 at 21:59

1

I met this issue.

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 stylesheet MIME type, and strict MIME checking is enabled.

Changing the path could solve this issue.

edited Mar 04 '19 at 21:59

Peter Mortensen

28,342
21
95
123

answered Jul 02 '18 at 04:56

ZILONG PAN

2,517
1
8
6

score 1 · Answer 40 · edited Mar 04 '19 at 22:04

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 JavaScript file used by Webpack.

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

score 1 · Answer 41 · answered May 16 '19 at 20:37

May be You have authorization issue Buddy :

Try these steps :

Go to ISS -> find your project listed -> Click on it -> Click on Edit permissions in right pane under actions
you will see your project properties wizard . Click on Securities
Under groups or user names -> If you see 'Authenticated users' , then you are authorized if not then you have to it .
Once you add it ( your self or with the help of your administrator if you work in a company :)) , the website will start loading resources. You may need to restart your project under ISS.

Thanks

score 1 · Answer 42 · answered Aug 26 '19 at 21:36

1

Yet another reason for this error may be that the CSS file permissions are incorrect. In my case the file was inaccessible because ownership had been changed to the root user-- which happened due to pushing Git files as the root user.

answered Aug 26 '19 at 21:36

apostl3pol

610
5
13

score 1 · Answer 43 · answered Nov 01 '19 at 20:04

In my case it was the execution order of tasks ran by Grunt.

It was executing the task connect that sets up the local server and automatically opens the app in a new tab before executing less and postcss that transpile styles.

Basically, I changed this:

grunt.registerTask('default', 'Start server. Process styles.', ['connect', 'less', 'postcss']);

To this:

grunt.registerTask('default', 'Process styles. Start server.', ['less', 'postcss', 'connect']);

And it worked! Hope it helps other people too.

score 1 · Answer 44 · answered Dec 08 '19 at 05:15

1

I faced similar error and found that the error was adding '/' at the end of style.css link href.

Replacing <link rel="stylesheet" href="style.css/"> to <link rel="stylesheet" href="style.css"> fixed the issue.

answered Dec 08 '19 at 05:15

Gladiator

65
1
9

score 1 · Answer 45 · answered Dec 20 '19 at 19:22

Incase, you're working with a Node application, make sure that the \public folder is immediately below the root folder, and not within the views folder. This can become troublesome. Move the \public immediately below the root and then restart the server and witness the changes.

score 1 · Answer 46 · answered Feb 01 '20 at 06:27

1

I almost tried all given solutions, the problem for me was I had no MIME types option in IIS, that is I was missing this Windows feature.

The solution for me was:

"And if you're on a non-server OS like Windows 8 or 10, do a search on the start page for "Turn Windows features on or off" and enable: Internet Information Services -> World Wide Web Services -> Common HTTP Features -> Static Content"

Enable IIS Static Content

answered Feb 01 '20 at 06:27

Sayyed Dawood

147
11

1

This fixed problem for me. Thanks. – osynavets Apr 06 '21 at 07:57

score 1 · Answer 47 · answered Mar 10 '20 at 08:08

1

I was facing the same problem.

I change my directories' permission to "755" now all the files are loading.

You can also try my answer. I hope this will work for you. If the answer works for you, don't hesitate to vote for the answer. Best of luck.

answered Mar 10 '20 at 08:08

Adnan Ahmad

712
8
11

score 1 · Answer 48 · answered Mar 17 '20 at 11:46

1

I faced this challenge with select2. It go resolved after I downloaded the latest version of the library and replaced the one (the css and js files) in my project.

answered Mar 17 '20 at 11:46

Yaw

116
1
3

score 1 · Answer 49 · answered Apr 15 '20 at 07:57

1

In my case the problem was solved just after changing the random value in the .scss file. After reloading the problem disappeared and the styles began to load well. Simple, but works :P

answered Apr 15 '20 at 07:57

borkson

43
4

which random value are you referring to in the scss file? – Subbu Jun 02 '20 at 15:09
@Subbu it wasn't any special value in my case. i changed the first value which i found in .scss file which i opened. sorry if cant help you better – borkson Jun 04 '20 at 19:43
OK, Thanks for the response though :) – Subbu Jun 05 '20 at 05:24

score 1 · Answer 50 · answered Apr 21 '20 at 08:23

I have used virtual domain in my XAMPP and got this issue. So in httpd-vshosts.conf file when I checked, I had explicitly pointed to index.php file and this had caused the issue.

So I changed this:

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/index.php"
    ServerName cv.dv
</VirtualHost>

to this:

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/"
    ServerName cv.dv
</VirtualHost>

and then the files were loaded without issues.

score 1 · Answer 51 · answered Jun 29 '20 at 08:19

In my angular-ionic project I've a css entry like this for a component which would only load when I request.

 .searchBar {
    // --placeholder-color: white;
    // --color: white;
    // --icon-color: white;
    // --border-radius: 20px;
    // --background: color:rgba(73,76,67,1.0);
    // --placeholder-opacity: 100%;
    // background-color: red;
  }

as soon as I commented out all the values inside the css class entry it started working again.

I think this was happening due to having these properties background-color with --background together.

score 0 · Answer 52 · edited Mar 04 '19 at 21:48

0

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 the correct temporary directory. Make sure your server has permission to write to that directory.

edited Mar 04 '19 at 21:48

Peter Mortensen

28,342
21
95
123

answered May 16 '18 at 05:59

Asit

468
3
14

What application? – Peter Mortensen Mar 04 '19 at 21:49

score 0 · Answer 53 · edited Mar 04 '19 at 22:06

0

Resaving a .ts file (forcing Ionic to rebuild) solved it 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

edited Mar 04 '19 at 22:06

Peter Mortensen

28,342
21
95
123

answered Oct 15 '18 at 10:31

luciomonter

279
5
6

score 0 · Answer 54 · edited Mar 04 '19 at 22:13

0

I tried to restart my Windows machine and reinstalled the "npm i".

It worked for me.

edited Mar 04 '19 at 22:13

Peter Mortensen

28,342
21
95
123

answered Feb 20 '19 at 14:55

verma

57
4

MIstaken JOKester · Answer 55 · 2021-02-17T09:57:36.953

0

I would like this share some thoughts on this topic, when I place app.use(expres.static('../frontEnd/public')) it don't work, but when I use app.use(express.static('/frontEnd/public')) it works fine, I hope this would help someone

edited Feb 17 '21 at 09:57

answered Feb 17 '21 at 09:46

MIstaken JOKester

11
4

Please check out the [formatting help page](https://stackoverflow.com/editing-help) to improve your formatting. – costaparas Feb 17 '21 at 10:15

score 0 · Answer 56 · answered Mar 02 '21 at 16:35

0

Nothing that everyone comments has helped me, the solution has been to fix the routes since from the main page I found the file but when I navigated it disappeared, the correct solution would say to have these things well placed

answered Mar 02 '21 at 16:35

elver

37
5

score -5 · Answer 57 · answered Nov 05 '19 at 05:53

-5

You must have imported multiple stylesheets. try to remove one and try again

answered Nov 05 '19 at 05:53

Shubham Dhupe

15
6

Stylesheet not loaded because of MIME-type

57 Answers57

Bootstrap styles not loading #3411

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

Linked

Related