CODEWITHSUNDEEP
javascriptjquerycssnode.jsmeteor
CocaCola45
CocaCola45

Reputation: 21

css was not loaded because its MIME type in Meteor JS

I have meteor js 1.8 app, i have made a layout, and for that layout i want to add css. I have a structure like this:

imports

-ui
--stylesheets
--bootstrap.min.css
--font-awesome.min.css
--skins.css
--forms.css

So i have put all the css in stylesheets folder under imports. Now a layout called main_layout.html' and correspondingmain_layout.jsandmain_layout.css` those files i put under:

-ui
--layouts
---dashboard
---main_layout.html
---main_layout.js
---main_layout.css

So i put all the imports in main_layout.css like this:

@import '{}/imports/ui/stylesheets/bootstrap.min.css';
@import '{}/imports/ui/stylesheets/font-awesome.min.css';
@import '{}/imports/ui/stylesheets/skins.css';
@import '{}/imports/ui/stylesheets/forms.css';

And i imported main_layout.css in main_layout.js :

import './main_layout.html'
import './main_layout.css'

I have a rule for flow-router which renders this layout:

import '../../ui/layouts/dashboard/main_layout'

FlowRouter.route('/', {
    name: 'App.home',
    action() {
    BlazeLayout.render('mainLayout', {main: ''});
    },
});

But when i visit localhost:3000/ i get error in browser console:

The stylesheet http://localhost:3000/%7B%7D/imports/ui/stylesheets/bootstrap.min.css was not loaded because its MIME type, “text/html”, is not “text/css”.

And so on for the rest of css files. How can i load css using import then?

Upvotes: 2

Views: 558

Answers (2)

Ali Ebrahimi
Ali Ebrahimi

Reputation: 99

remove @ and use with . for public files, like below:

import './stylesheets/bootstrap.min.css';

Upvotes: 0

ghybs
ghybs

Reputation: 53215

Welcome to SO!

The MIME type error message is just a symptom of your browser trying to fetch a CSS file that your server does not find and returns an HTML page instead. In the case of a Meteor app, a file not found is usually replaced by your main page.

See Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

In your specific case you just need to realize that @import in your CSS is not treated by your Meteor CSS package: it is copied as-is in your CSS rules. Therefore that is what your browser sees, and it requests the specified path. A simple workaround would be for example to place your vendor CSS in your project public folder, like a static asset, and continue importing it but with a corrected path like:

@import '/stylesheets/bootstrap.min.css';

(Assuming you placed the vendor file in public/stylesheets/bootstrap.min.css)

You also have other possible solutions, typically importing each CSS file by referencing them in your JS file like you did for your entry CSS file, or using a different style compiling package which handles the imports (e.g. meteor sass).

Upvotes: 0

Related Questions