Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/client/stylesheets/bootstrap.css"

help
1

I get the following error message in the client:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/client/stylesheets/bootstrap.css"

I thought that the client/stylesheets/ is the preferred folder structure for overall CSS files like eg bootstrap.

I currently have this in my main.html file which is having head and body tags and all the meta data. How do I have to modify this line:

<link href="/client/stylesheets/bootstrap.css" rel="stylesheet">

or move it to a different folder to get rid of this annoying error message in the client?

Thanks in advance!

2

Move it to a folder named /public and load it from href="/bootstrap.css"

From the documentation

/public
Files in /public are served to the client as-is. Use this to store assets such as images. For example, if you have an image located at /public/background.png, you can include it in your HTML with <img src='/background.png'/> or in your CSS with background-image:
url(/background.png). Note that /public is not part of the image URL.

2 Likes
3

Thank you, will do that.

4

That error message (almost all the time) means the server returned a ‘404 not found’ response.

In your case it means it could not find the file in /client/stylesheets/bootstrap.css

5

I actually move it to the client folder (leaving the stylesheets folder) and it works without problems.

6

You are right.

Putting your css files in a /client folder is the right thing to do, in which case you don’t need to include them in the html file, Meteor manages everything for you. The same is true for js files like external libraries you can put in /client/lib or /lib (shared between client and server)

We all answered to the specific question without wondering what you were trying to achieve !

Use cases for putting a css in /public are very limited, like large browser-specific files that you load conditionally in your html to fix old browsers like IE8.

3 Likes
7

Thanks for your clarification, it will surely help others as well. As per you last paragraph, where do I have to put the following old browser fixes:

<!-- Custom styles for this template -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="client/compatibility/html5shiv.js"></script>
    <script src="client/compatibility/respond.min.js"></script>
<![endif]-->

This is coming from a Bootstrap configuration which was setup in general, it doesn’t know anything about Meteor or what Meteor handles automatically.

8

This answer
Putting your css files in a /client folder is the right thing to do, in which case you don’t need to include them in the html file, Meteor manages everything for you. The same is true for js files like external libraries you can put in /client/lib or /lib (shared between client and server)
Was more useful than just for the asked question. Without this knowledge, lots of things in Meteor do not make sense. Thanks.