在上面的目录中找不到bower_components

Question

I have the following directory structure in one of my projects:

/web
  /bower_components
    /bootstrap
    /jquery
    /typeahead.js
  /views
    /index.jade

I'm trying to use these components from my index.jade file in the following way:

link(src='../bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
script(src='../bower_components/jquery/dist/jquery.min.js')
script(src='../bower_components/typeahead.js/dist/typeahead.bundle.min.js')

but it doesn't work (there's no bootstrap -related styles on this page and jQuery code doesn't work).

Why? What am I doing wrong? How can I fix it?

Should I refer to these components in a different way?

Should I place bower_components directory in another folder?

Answer 1

You probably need to change the file path to be relative to where you are compiling the jade file to.

For example, if you render the jade like this:

/web
  /index.html

the source paths would be

link(src='bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
script(src='bower_components/jquery/dist/jquery.min.js')
script(src='bower_components/typeahead.js/dist/typeahead.bundle.min.js')