Resource Interpreted as Stylesheet But Transferred with Mime Type Text Plain Issue

Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

i'd like to start by understanding the problem

Browsers make HTTP requests to servers. The server then makes an HTTP response.

Both requests and responses consist of a bunch of headers and a (sometimes optional) body with some content in it.

If there is a body, then one of the headers is the Content-Type which describes what the body is (is it an HTML document? An image? The contents of a form submission? etc).

When you ask for your stylesheet, your server is telling the browser that it is an HTML document (Content-Type: text/html) instead of a stylesheet (Content-Type: text/css).

I've already checked my myme.type and text/css is already on css.

Then something else about your server is making that stylesheet come with the wrong content type.

Use the Net tab of your browser's developer tools to examine the request and the response.

Resource interpreted as Stylesheet but transferred with MIME type text/javascript

I had the exact same problem, cause by lines in my HTML in the following form:

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

The problem was fixed when I removed rel="stylesheet" from the tag.

Firebase Resource interpreted as Stylesheet but transferred with MIME type text/html

Sidney was wright with his wild guess.
The link to the stylesheet and the images weren't correct in the bundled index.html. Parcel referred to the dist folder, where he should have referred directly to the files. I was able to manually change the links from

<link rel="stylesheet" href="/dist/natalem-20.css">

to

<link rel="stylesheet" href="/natalem-20.css">

And then everything worked out fine.

Because Firebase wasn't able to find the correct stylesheet, he just sent back the HTML as .css - file. Because of that, there was no 404-error in the console but the warning

Resource interpreted as Stylesheet but transferred with MIME type text/html

So to fix the problem, just change the path in the bundled index.html or (what I'm gonna do now) is to figure out, how to change this over the Parcel config.

Thanks a lot to Sidney for the help!
Props to you!

Sincerely yours,

Raphael

Resource interpreted as Stylesheet but transferred with mime

OP forgot to upload his responsive.css, and it wasn't found. Ensure you have uploaded that file to the root folder.

As shown below, you can see if this is happening in the network tab (F12 in firefox or chrome under the developer tools). You can also click on the mystyle.css, and click "Response" to view what was downloaded and ensure you're seeing the correct stylesheet.

If you navigated to the css file, you would see that it goes to your hosting providers 404 error page, instead of the correct .css file.

Springboot - Resource interpreted as Stylesheet but transferred with MIME type text/htm

I had the exact same issue while writing some code with Spring Boot + Spring MVC. The CSS files set using a CDN worked fine, while the CSS file set from my static/css folder returned a HTML content.

Example:

<!-- This first worked fine, loading all styles -->
<link th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"
      href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" media="screen" />

<!-- This second one returned the content of an HTML - Content Type text/html -->
<link rel="stylesheet" th:href="@{/css/login/style.css}" href="/css/login/style.css" />

After a while I could see using Chrome Dev Tools that the content returned for my local style.css was the same as one of my HTML pages.

Inspecting the route that pointed to the HTML file with that content, I could realise I was using the wrong property for the @RequestMapping configuration. I had @RequestMapping(name="..."), instead of @RequestMapping(path="...").

Controller with the problem

@RequestMapping(name = "/product/add", method = RequestMethod.GET)
public String add(Model model) {
    model.addAttribute("product", new Product());
    return "product/edit";
}

Controller changed

@RequestMapping(path = "/product/add", method = RequestMethod.GET)
public String add(Model model) {
    model.addAttribute("product", new Product());

    return "product/edit";
}

After changing the property name with path everything started to load correctly.

It was strange how a small mistake like this affected my whole program.

Hope it's somehow useful for someone who faces the same issue.

Resource interpreted as Stylesheet but transferred with MIME type text/x-scss

Browsers don't support SCSS. You need to compile it to CSS and serve the CSS files to the browser.

There are various compilers that support it. SASS is the official one. You might want to find one that integrates with your existing build toolchain.

Resource interpreted as Stylesheet but transferred with MIME type text/html in ASP.NET IIS

Seems to me like the problem is in your IIS configuration. it might be configured to deliver .css files with text/html MIME type.

Try going to the MIME types configuration on the web server and see if you can spot anything there.

The correct MIME type for .css files is text/css.

You can also have a look on the HTTP header parameters with some HTTP sniffer such as fiddler.

Updating: The accepted answer should be the one pointed by @brett-pennings!
Just providing static contents, the error vanished automatically.

Chrome says Resource interpreted as Stylesheet but transferred with MIME type text/html

You're setting mimeType during initialization based on one file that you might be sending out, rather than setting it based on the file that you're actually sending out. That will cause any non-HTML files that you might send (e.g CSS or JS files) to go out with a misleading Content-Type header. You need to do the check inside your request handler.

---

Related Topics