Problem accessing css from handlebars (express API)

1
votes

So i've run into a problem, where i simply can't get the css to have any effect on my hbs code.

My service has a structure like this:

  • Service
    • Controllers
    • Models
    • public
      • css
        • styles.css
    • Routers
    • Views
      • index.hbs
    • app.js
    • package.json
    • Procfile
    • node_modules
    • package-lock.json

Now, I want my index.hbs file to use the stylesheet "styles.css" in the public css folder. therefore i put a reference in index.hbs to it with:

link rel="stylesheet" href="../public/css/styles.css">

also, I put app.use(express.static(path.join(__dirname, '/public'))); in my app.js

When I ctrl+click the reference in the hbs (in VSC) it takes me to the right css file, yet it doesn't work when i run the app. Is something wrong with the app routing? i feel like i've tried everything, so appreciate any feedback
- Fred

1
javascriptcssapiexpresshandlebars.js
The stylesheet will be relative to your application. You also shouldn't need to put the public path because that's already assumed to be where everything is coming from. You should just go /css/styles.css in your link - Chris
oh wow. i feel super dumb right now. thanks a lot - i could've spent hours trying to find advanced solutions. really appreciate it - Fred
Similar questions have been asked before. See: stackoverflow.com/a/66732509/3397771 - 76484

1 Answers

0
votes

When you have set "public" folder as static you don't have to define relative path, your link should be as follows:

<link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />