Can't get stylesheet to work with ejs for node.js

问题

I'm trying to make a simple server with node, express and ejs for the template. I've gotten the server to point to the page, load it, and am even able to generate other bits of code with the include statement. However for some reason the style sheet will not load.

app.js

var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
fs = require('fs');

var PORT = 8080; 

app.set('view engine', 'ejs');

app.get('/', function(req, res){
res.render('board.ejs', {
    title: "anything I want",
    taco: "hello world",
    something: "foo bar",
    layout: false
  });
});


app.listen(PORT);
console.log("Server working");

The ejs file is in a directory views/board.ejs

<html>
 <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='../styles/style.css' />
 </head>
 <body >
    <h1> <%= taco %> </h1>
    <p> <%=  something %> </p>
 </body>
</html>

and style.css is in a styles/style.css directory relative to app.js

p {
  color:red;
}

I've tried every path that I can conceive of for the href of the link including relative to where my localhost points relative to app.js relative to board.ejs and even just style.css but none seem to work. Any suggestions are greatly appreciated.

回答1:

Declare a static directory:

app.use(express.static(__dirname + '/public'));

<link rel='stylesheet' href='/style.css' />

回答2:

in app.js:

 you must first declare static directory 

app.use("/styles",express.static(__dirname + "/styles"));

in ejs file :

<link rel='stylesheet' href='/styles/style.css' />

回答3:

Recently I was working with this same thing and my CSS was not working. Finally, I get the trick. My static path was like below,

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory =  express.static(publicDirectoryPath);
app.use(staticDirectory);

and my folder structure was like

The trick is that express access only defined static path, in my case CSS was outside of public so it was not working and suddenly I move CSS folder inside my public folder and that's it. Works beautifully.

Above example was for only one static path. For multiple static path you can use the code in the below

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const cssDirectoryPath = path.join(__dirname, '../src/css');
const staticDirectory =  express.static(publicDirectoryPath);
const cssDirectory =  express.static(cssDirectoryPath);


app.use(staticDirectory);
app.use('/css/',cssDirectory);

And my generic HTML file is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet"  href="../css/styles.css">
</head>
<body>
<h1>this is index page</h1>
</body>
</html>

回答4:

To set the entry point for your application dependancies like css, img etc add below line into your server.js (or which ever being used).

app.use(express.static(__dirname + '/'))

This tells to get css files from current directory where server.js is present. Accordingly you can define relative path of css in html file.

来源：https://stackoverflow.com/questions/13486838/cant-get-stylesheet-to-work-with-ejs-for-node-js

标签

node.js

express

stylesheet

ejs