[html] 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 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:


But I keep getting the error.

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

This question is related to html css gulp mime-types browser-sync

The answer is

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:


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

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.

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.

Enter image description here

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

Enter image description here

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.

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

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

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


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


<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

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:

Enter image description here

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

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.

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

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


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

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

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.

I have had the same problem.

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

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

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:


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

In case you using Express with no JS try with:


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

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?

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.

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

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

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

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

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

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

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.

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

Bootstrap styles not loading #3411


  1. I installed Bootstrap v. 3.3.7

    npm install bootstrap --save
  2. Then I added the needed script files to apps[0].scripts in the angular-cli.json file:

    "scripts": [
    // And the Bootstrap CSS to the apps[0].styles array
    "styles": [
  3. I restarted ng serve

It worked for me.

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

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.

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


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

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

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


  • 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

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

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.

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.

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

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.

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']

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

It worked for me.

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.

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.

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.

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.

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.

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


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.

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

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.

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

to this:

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

and then the files were loaded without issues.

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

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.

May be You have authorization issue Buddy :

Try these steps :

  1. Go to ISS -> find your project listed -> Click on it -> Click on Edit permissions in right pane under actions
  2. you will see your project properties wizard . Click on Securities
  3. Under groups or user names -> If you see 'Authenticated users' , then you are authorized if not then you have to it .
  4. 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.


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.

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.

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

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

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.

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

Enable IIS Static Content

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

Questions with html tag:

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment Angular 6: saving data to local storage Vue.js get selected option on @change Bootstrap 4 multiselect dropdown How to add bootstrap in angular 6 project? Angular 5 Button Submit On Enter Key Press Angular 5, HTML, boolean on checkbox is checked How to render string with html tags in Angular 4+? bootstrap 4 file input doesn't show the file name How can I execute a python script from an html button? Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Failed to load resource: the server responded with a status of 404 (Not Found) css Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? CSS Grid Layout not working in IE11 even with prefixes How to prevent page from reloading after form submit - JQuery Centering in CSS Grid Detecting real time window size changes in Angular 4 Angular 4 img src is not found (change) vs (ngModelChange) in angular Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 How to style a clicked button in CSS How do I change the font color in an html table? Redirecting to a page after submitting form in HTML Load json from local file with http.get() in angular 2 display: flex not working on Internet Explorer Scroll to element on click in Angular 4 How to extract svg as file from web page force css grid container to fill full screen of device How does the "position: sticky;" property work? HTML5 Video autoplay on iPhone Disable button in angular with two conditions? CSS hide scroll bar, but have element scrollable CSS grid wrapping How to load image (and other assets) in Angular an project? Flask - Calling python function on button OnClick event How can I make Bootstrap 4 columns all the same height? Wrapping a react-router Link in an html button

Questions with css tag:

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Font Awesome 5 font-family issue Failed to load resource: the server responded with a status of 404 (Not Found) css CSS class for pointer cursor How and where to use ::ng-deep? Styling mat-select in Angular Material What is the difference between CSS and SCSS? iPhone X / 8 / 8 Plus CSS media queries Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Add class to an element in Angular 4 CSS Grid Layout not working in IE11 even with prefixes Search input with an icon Bootstrap 4 Bootstrap 4 - Inline List? Centering in CSS Grid Bootstrap 4, how to make a col have a height of 100%? Equal height rows in CSS Grid Layout Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 Customize Bootstrap checkboxes How to style a clicked button in CSS How can I get the height of an element using css only display: flex not working on Internet Explorer force css grid container to fill full screen of device How does the "position: sticky;" property work? bootstrap 4 row height Prevent content from expanding grid items Bootstrap 4 File Input CSS hide scroll bar, but have element scrollable CSS grid wrapping Bootstrap 4 Change Hamburger Toggler Color How can I make Bootstrap 4 columns all the same height? How to hide collapsible Bootstrap 4 navbar on click Bootstrap 4 Center Vertical and Horizontal Alignment Cannot read property 'style' of undefined -- Uncaught Type Error How to window.scrollTo() with a smooth effect Vertical Align Center in Bootstrap 4 How to implement a Navbar Dropdown Hover in Bootstrap v4? CSS change button style after click What is correct media query for IPad Pro? How do I specify row heights in CSS Grid layout?

Questions with gulp tag:

How to fix ReferenceError: primordials is not defined in node Everytime I run gulp anything, I get a assertion error. - Task function must be specified Stylesheet not loaded because of MIME-type Node update a specific package 'gulp' is not recognized as an internal or external command How to watch and reload ts-node when TypeScript files change How to use npm with ASP.NET Core Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style Gulp error: The following tasks did not complete: Did you forget to signal async completion? NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack Error: Cannot find module 'gulp-sass' Karma: Running a single test file from command line Pass Parameter to Gulp Task Try reinstalling `node-sass` on node 0.12? cannot find module "lodash" Gulp command not found after install How do I copy directories recursively with gulp? Using Gulp to Concatenate and Uglify files gulp command not found - error after installing gulp Excluding files/directories from Gulp task Is it possible to pass a flag to Gulp to have it run tasks in different ways? How to run Gulp tasks sequentially one after the other After installation of Gulp: “no command 'gulp' found” Why do we need to install gulp globally and locally? Concat scripts in order with Gulp Get the current file name in gulp.src() Can't get Gulp to run: cannot find module 'gulp-util'

Questions with mime-types tag:

Stylesheet not loaded because of MIME-type Is the MIME type 'image/jpg' the same as 'image/jpeg'? Proper MIME type for .woff2 fonts How to check file MIME type with javascript before upload? Correct MIME Type for favicon.ico? Right mime type for SVG images with fonts embedded Which mime type should I use for mp3 Correct mime type for .mp4 What does "Content-type: application/json; charset=utf-8" really mean? Add MIME mapping in web.config for IIS Express How to determine MIME type of file in android? Interface/enum listing standard mime-type constants What MIME type should I use for CSV? .rar, .zip files MIME Type Which MIME type to use for a binary file that's specific to my program? HTTP Error 404.3-Not Found in IIS 7.5 How to set MimeBodyPart ContentType to "text/html"? What is a correct MIME type for .docx, .pptx, etc.? When to use the JavaScript MIME type application/javascript instead of text/javascript? What is a MIME type? Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives? What Content-Type value should I send for my XML sitemap? What is correct content-type for excel files? Why write <script type="text/javascript"> when the mime type is set by the server? How can I find out a file's MIME type (Content-Type)? Debug message "Resource interpreted as other but transferred with MIME type application/javascript" File input 'accept' attribute - is it useful? Using .NET, how can you find the mime type of a file based on the file signature not the extension

Questions with browser-sync tag:

Stylesheet not loaded because of MIME-type Node update a specific package