3

I am using jade grunt and compass to produce a site, and instead of havving to type the correct path to files within jade file e.g.:

link(href='../../../../stylesheets/sections/pdp.css'

I was wondering i there was a way of using something like /stylesheets/sections.pdp.css

so I don't have to write the correct path each time.

Thanks!

EDIT:

config.rb

http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "assets/images"
javascripts_dir = "scripts"
#output_style = :compressed
relative_assets=true
line_comments = false
user1937021
  • 10,151
  • 22
  • 81
  • 143
  • Can you not have compass output the pdp.css closer to the root jade index file? – Mike Mellor Feb 16 '16 at 18:15
  • @MikeMellor how exactly? Thanks! – user1937021 Feb 17 '16 at 06:57
  • Are you using grunt for compass? Either way could you post your compass grunt config or your compass config.rb? – Mike Mellor Feb 17 '16 at 09:40
  • well without knowing your structure it's a bit hard, bit where you have css_dir you could add a path to make it sit next to your index html. So i'll make up a structure for now - css_dir = "www/mysite/jade/stylesheets" then if your index was sat in the same folder you could just use link(href='stylesheets/sections/pdp.css' – Mike Mellor Feb 17 '16 at 15:01

1 Answers1

1

In your example, pug is not reading the file at ../../../../stylesheets/sections/pdp.css. It is outputting that string as the value for the href attribute of the link HTML tag, like this:

<link href="../../../../stylesheets/sections/pdp.css" />

So these paths are not relative to your views directory: they are relative to the path that the browser is getting.

You may benefit from using absolute URLs for thesehref fields, instead of relative URLs. Like this:

link(href='/stylesheets/sections/pdp.css')

The code below is equivalent, but factors out the path to the css directory, which might be useful for other tags:

- var cssDir = '/stylesheets';
link(href= cssDir + '/sections/pdp.css')
Lucas Neves
  • 65
  • 4