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     lt link rel  stylesheet  type  text css  href  assets styles custom-style css   gt    And the stylesheet is a merge between Bootstrap  amp  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

User · Answer

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

User · Answer

I have changed my  href  -   src   So from this    lt link rel  stylesheet  href  dist photoswipe css  gt    to this    lt link rel  stylesheet  src  dist photoswipe css  gt    It worked  I don t know why  but it did the job

User · Answer

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    lt link href  xxx css  rel  stylesheet  gt  -- gt    You could put related css file path on styles css file    import     node modules material-design-icons-iconfont dist material-design-icons css

User · Answer

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    lt link rel  stylesheet  href    index css  gt    so the simple solution was to remove the   since mine is a single-page application   Like this    lt link rel  stylesheet  href   index css  gt    so it always resolves to  index css

User · Answer

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

User · Answer

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  lt link rel  stylesheet      gt  tag with the intention of applying CSS styles  But the returned content type contradicts so that it logs an error

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt 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    lt body gt       lt  --     -- gt         lt link itemprop  url  href  http   en wikipedia org wiki The Catcher in the Rye    gt       lt  --     -- gt   lt  body gt     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

User · Answer

Remove rel  stylesheet  and add type  text html   So it will look like this -   lt link  href  styles css  type  text html    gt

User · Answer

This is specific to Typescript Express I ctrl f d  quot Typescript quot  and  quot  ts quot  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   quot  public quot       to app use e static path join   dirname   quot    public quot

User · Answer

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  quot public css style css quot    lt link href  quot public assets css custom css quot  gt   lt script src  quot public assets js scripts js quot  gt  lt  script gt    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

User · Answer

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    lt link rel  stylesheet  href  lib foobar css  gt    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

User · Answer

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  lt link gt  to the index html I added an import to the component where I need to use this stylesheet   import  path to stylesheet css

User · Answer

I know it might be out of context but linking a non existed file might cause this issue as it happened to me before    lt  -- bootstrap grid -- gt   lt link rel  stylesheet  href    css bootstrap-grid css    gt    If this file does not exist you will face that issue

User · Answer

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    lt VirtualHost   80 gt      DocumentRoot  C  xampp htdocs cv index php      ServerName cv dv  lt  VirtualHost gt    to this     lt VirtualHost   80 gt      DocumentRoot  C  xampp htdocs cv       ServerName cv dv  lt  VirtualHost gt    and then the files were loaded without issues

User · Answer

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

User · Answer

In my case I had to both make sure that the link was relative and the rel property was after the href property    lt link href   assets styles iframe css  rel  stylesheet  gt

User · Answer

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

User · Answer

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  lt link gt  in index html has to be app styles style css and not styles style css

User · Answer

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

User · Answer

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

User · Answer

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    lt link rel  stylesheet  type  text css  href  assets css bootstrap css  gt   lt link rel  stylesheet  type  text css  href  assets css site css   gt

User · Answer

In addition to using   lt base href  quot   quot  gt   Also remove the rel  quot stylesheet quot  part from your css links   lt link type  quot text css quot  href  quot assets styles custom-style css quot   gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I got the same issue and then I checked that I wrote    lt base href      gt  in index html  Then I changed to   lt base href     gt    And then it worked fine

User · Answer

I faced similar error and found that the error was adding     at the end of style css link href   Replacing     lt link rel  stylesheet  href  style css   gt  to  lt link rel  stylesheet  href  style css  gt  fixed the issue

User · Answer

I had this error for a Bootstrap template    lt link href  starter-template css  rel  stylesheet  gt    Then I removed the rel  stylesheet  from the link  i e     lt link href  starter-template css  gt    And everything works fine  Try this if you are using Bootstrap templates

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I tried to restart my Windows machine and reinstalled the  npm i    It worked for me

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt link rel  stylesheet  href  style css  gt

User · Answer

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  lt base href     gt  tag in your dist index html   In this case  you will need to update to  lt base href   sub-folder   gt    https   github com angular angular-cli issues 1080

User · Answer

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

User · Answer

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

User · Answer

I had this problem with a site I knew worked online when I moved it to localhost and PhpStorm   This worked fine online        lt link rel  stylesheet  href   css additional css  gt    But for localhost I needed to get rid of the slash        lt link rel  stylesheet  href  css additional css  gt    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         lt link rel  stylesheet  href  css additional css  type  text css  media  all  gt

User · Answer

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

User · Answer

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    lt link type  text css  rel  stylesheet  href   css styles css  gt    This solution is perfect as the path is the main issue for CSS not getting rendering

User · Answer

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

User · Answer

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

User · Answer

This error can also come up when you re not referring to your CSS file properly   For example  if your link tag is   lt link rel  stylesheet  href  styles css  gt    but your CSS file is named style css  without the second s  then there is a good chance that you will see this error

User · Answer

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    lt link  ngIf  cssUrl  rel  stylesheet  type  text css   href   sanitizer bypassSecurityTrustResourceUrl cssUrl   gt

User · Answer

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   39 http   localhost 8100 build main css  39  because its MIME type    39 text html  39   is not a supported

User · Answer

Make a folder just below above the style css file as per the Angular structure and provide a link like  lt link href  vendor bootstrap css bootstrap min css  rel  stylesheet  gt

User · Answer

If you are setting Styles in JavaScript as       var cssLink   document createElement  link        cssLink href      content component scss       cssLink rel    stylesheet      -- gt  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

User · Answer

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  gt    If you did include a forward slash   public   then you can just do href  css style css

[html] Stylesheet not loaded because of MIME-type

Examples related to html

Examples related to css

Examples related to gulp

Examples related to mime-types

Examples related to browser-sync