Problems getting CSS in Node JS

Question

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

Does this answer your question? MIME type error with express.static and CSS files — nick
– nick, Commented Aug 23, 2020 at 1:23

nick · Accepted Answer · 2021-06-23 17:25:23Z

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.

Collectives™ on Stack Overflow

Problems getting CSS in Node JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related