How to link css to html in an express project?


Tags: html,css,express

Problem :

I have an Express.js project wich looks like this:

  • public
    • images
    • javascripts
    • stylesheets
  • routes
    • index.js
  • views
    • authentication.html
    • authentication.css

In routes/index.js I can display my html file like this:

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/../views/authentication.html'));
});

But the file is displayed without its style contained in authentication.css. However, authentication.css is linked to authentication.html :

<head>
    <meta charset="utf-8">
    <link rel = "stylesheet" href = "authentication.css">
</head>

I tried to move my .css to the public/stylesheets folder and change the <link> tag to point to the new location but it didn't worked.

What am I supposed to do to apply my css files to the corresponding html files?



Solution :

So I found some sort of solution thanks to this post : http://stackoverflow.com/a/17911882/5016201 .

I just added this line in app.js:

app.use(express.static(__dirname + 'views'));

It displays my html + css files correctly, I don't know if it is a good practice but it is good enough for what I am doing.


    CSS Howto..

    How to flatten checkbox using CSS? [duplicate]

    How to set the width of my table columns to a fixed value?

    How can I make a fluid width header with text-overflow ellipsis without wrapping?

    how to adjust width of first cell of a table using CSS

    How would I have a larger center bottom navbar button in jQuery Mobile default navbar?

    JavaFX-CSS: How to “move” style of parent to a child?

    CSS only - how to have a scrolling ul with all li on one line

    How to scroll .list-group leaving navigation bar at top

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    How to hide an input-box with CSS

    How to make shapes with CSS which have borders?

    How to make a header bar fold over the webpage css

    HTML/CSS | How to place different elements in a header div to different positions?

    How to indent items of a sublist using css and html in wordpress

    css divs display:none reseting and showing divs when function is called

    How can I get an element to stay within the browser's window width when its content is wider?

    How do I gather a class' css attributes given nothing but the className?

    CSS How to make DIV Border Dynamic in Width

    How to change color in first td in my table using class

    How to adjust the height of two objects floating next to each other according to the amount of content, using css

    How to remove that ugly border in my link with a background image?

    CSS - How to add a second background image

    how to put css max-left or min-left position to absolute object?

    How to add Active states and icons in wordpress wp_nav_menu()

    How to Bring a h1 to top of the div?

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    How to play specific keyframes with css animation

    How to write css fallbacks for vh vw

    How do I make my CSS link up to files in different directories