How can I include css files using node, express, and ejs?

问题

I'm trying to follow the instructions to https://stackoverflow.com/a/18633827/2063561, but I still can't get my styles.css to load.

From app.js

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

In my .ejs, I have tried both of these lines

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" />

Neither loads the css. I've gone into the developer's console noticed the type is set to 'text/html' instead of 'text/css'.

My path looks like

.
./app.js
./public
    /css
        /style.css

回答1:

Use this in your server.js file

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

and add css like

<link rel="stylesheet" type="text/css" href="css/style.css" />

dont need / before css like

<link rel="stylesheet" type="text/css" href="/css/style.css" />

回答2:

1.Create a new folder named 'public' if none exists.

2.Create a new folder named 'css' under the newly created 'public' folder

3.create your css file under the public/css path

4.On your html link css i.e <link rel="stylesheet" type="text/css" href="/css/style.css">

// note the href uses a slash(/) before and you do not need to include the 'public'

5.On your app.js include : app.use(express.static('public'));

Boom.It works!!

回答3:

Use in your main .js file:

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

use in you main .html file:

<link rel="stylesheet" type="text/css" href="css/style.css" />

The reason you getting an error because you are using a comma instead of a concat + after __dirname.

回答4:

I have used the following steps to resolve this problem

1. create new folder (static) and move all js and css file into this folder.
2. then add app.use('/static', express.static('static'))
3. add css like < link rel="stylesheet" type="text/css" href="/static/style.css"/>
4. restart server to view impact after changes.

回答5:

Its simple if you are using express.static(__dirname + 'public') then don't forget to put a forward slash before public that is express.static(__dirname + '/public') or use express.static('public') its also going to work; and don't change anything in CSS linking.

回答6:

The custom style sheets that we have are static pages in our local file system. In order for server to serve static files, we have to use,

app.use(express.static("public"));

where,

public is a folder we have to create inside our root directory and it must have other folders like css, images.. etc

The directory structure would look like :

Then in your html file, refer to the style.css as

<link type="text/css" href="css/styles.css" rel="stylesheet">

回答7:

Use this in your server.js file

app.use(express.static('public'));

without the directory ( __dirname ) and then within your project folder create a new file and name it public then put all your static files inside it

回答8:

The above responses half worked and I'm not why they didn't on my machine but I had to do the following for it work.

1. Created a directory at the root

   /public/js/

2. Paste this into your server.js file with name matching the name of directory created above. Note adding /public as the first param

   app.use('/public',express.static('public'));

3. Finally in the HTML page to which to import the javascript file into,

   <script src="public/js/bundle.js"></script>

来源：https://stackoverflow.com/questions/24582338/how-can-i-include-css-files-using-node-express-and-ejs