0

I downloaded the minified version of bootstrap and put it in the root directory of my project. Then in a HTML file in /views/ I added:

<link rel="stylesheet" href="/bootstrap.min.css">

However, the page continued to look the same because Bootstrap styles weren't added. I know I can use a CDN, I did and it worked, but for now I want to try including it locally. I tried to similarly include Semantic-UI but it didn't work too. What am I doing wrong?

wenn
  • 1
  • 2
  • Did you check this? http://stackoverflow.com/questions/4862231/links-not-going-back-a-directory – Shobhit Srivastava Dec 14 '16 at 13:27
  • did you tried this `` – Sankar Dec 14 '16 at 13:28
  • @SankarRaj - thanks for the comment but why should I try to go back one directory? As far as I know when I specify "/" the directory is absolute, i.e. no matter from which other directory I refer to it, it's always the same root directory of my project. So if put a css file in "/" then I should be able to specify its location as href="/mystyle.css" from anywhere in the project and it should work. Correct me if I'm wrong. EDIT: ok, saw the answer, I will try it – wenn Dec 14 '16 at 13:35

1 Answers1

0

I think I figured it out. Assuming that you have your stylesheet in /public then you have to add this line to your application file (usually app.js):

app.use(express.static(path.join(__dirname, 'public')));

From now on you can link to your stylesheets from anywhere in the project using this code:

<link rel="stylesheet" href="/bootstrap.min.css">

Note that we no longer have to specify the full path, which is "/public/bootstrap.min.css" - we omit the "/public" (in fact href="/public/bootstrap.min.css" would be an error).

If anybody reading this can explain why the first line is necessary please comment below. I believe I understand what it does but why the Express creators insisted on doing it that way i.e. why can't I <link> to my local files normally is what I don't get.

wenn
  • 1
  • 2