CODEWITHSUNDEEP
javascripthtmlcssnode.jshandlebars.js
goplay
goplay

Reputation: 154

Problems getting CSS in Node JS

im trying to load my CSS file in my Node JS app using handlebars, but i get the error

Refused to apply style from 'http://localhost:8080/styles/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I checked the path and its right. Any solution?

in my index.js i have app.use(express.static('public'))

and my handlebars html i have <link rel='stylesheet' type="text/css" href='/styles/main.css'>

My workspace is

-node_modules

-public
--styles
---main.css

-template-engine
--views
---layout
----main.handlebars

Upvotes: 0

Views: 577

Answers (1)

nick
nick

Reputation: 367

This is most likely caused by the way you called the app.use(express.static('public')). In general it is better to use the format below.

const path = require("path");
app.use(express.static(path.join(__dirname, "public")));

Unfortunately, it is hard to guess the exact reason for the problem from the information you've provided. Can you load other external sources like scripts or images? Or do you only experience this with the CSS files? This might be caused because express cannot locate the file or you might need to change the file permissions. Furthermore, this question is asked at least hundreds of times on StackOverflow and other sites. Have you checked the other questions? I am sure if this does not solve your problem one of the answers in there will.

Finally, I suggest you use express-handlebars instead of handlebars.js. It is probably much more suited for your needs. And don't forget to check out the default file structure in the express-handlebars as well.

Upvotes: 3

Related Questions