1

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

3
  • 1
    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 Commented Apr 23, 2021 at 17:45
  • oh wow. i feel super dumb right now. thanks a lot - i could've spent hours trying to find advanced solutions. really appreciate it Commented Apr 23, 2021 at 17:50
  • Similar questions have been asked before. See: stackoverflow.com/a/66732509/3397771 Commented Apr 23, 2021 at 21:30

1 Answer 1

0

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" />
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.