blocks|key|4602094|text|在您的server.js文件中使用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4602095|app.use(express.static(__dirname+%2B+'/public'));|code-block|syntax|javascript|4602096|并添加css，如|4602097|<link+rel="stylesheet"+type="text/css"+href="css/style.css"+/>|4602098|不需要/在css之前|4602099|<link+rel="stylesheet"+type="text/css"+href="/css/style.css"+/>|4602100|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Use this in your server.js file

<pre><code>app.use(express.static(__dirname + '/public'));
</code></pre>

and add css like

<pre><code>&lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
</code></pre>

dont need / before css like 

<pre><code>&lt;link rel="stylesheet" type="text/css" href="/css/style.css" /&gt;
</code></pre>

blocks|key|4602203|text|1.创建一个名为“public”的新文件夹(如果不存在)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4602204|2.在新创建的'public‘文件夹下创建一个名为'css’的新文件夹|4602205|3.在public/css路径下创建css文件|4602206|4.在你的html链接上css即<link+rel="stylesheet"+type="text/css"+++href="/css/style.css">|offset|length|style|CODE|4602207|//注意href在前面使用了斜杠(/)，您不需要包括'public‘|4602208|5.在你的app.js上包括：app.use(express.static('public'));|4602209|Boom.It成功了！！|4602210|entityMap^0|0|0|0|G|1R|0|0|F|Y|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@$H|X|I|Y|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|10|8|@$H|11|I|12|J|K]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|13|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|S|$]]

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 
<code>&lt;link rel="stylesheet" type="text/css" href="/css/style.css"&gt;</code>

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

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

Boom.It works!!

blocks|key|96156|text|我们拥有的自定义样式表是本地文件系统中的静态页面。为了让服务器提供静态文件，我们必须使用，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|96157|app.use(express.static("public"));|code-block|syntax|javascript|96158|哪里,|96159|public是我们必须在根目录中创建的文件夹，它必须有其他文件夹，如css、图像..等|96160|目录结构将如下所示：|96161|​|96162|📷|atomic|offset|length|96163|96164|然后，在html文件中，将style.css引用为|96165|<link+type="text/css"+href="css/styles.css"+rel="stylesheet">|96166|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/04ad0c8998fc41d926aca16e4fed31e4.png|imageAlt^0|0|0|0|0|0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1D|8|@]|9|@$R|1E|S|1F|1|1G]]|A|$]]|$1|T|3|N|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15|16|-4]]]]

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,

<pre><code>app.use(express.static("public"));
</code></pre>

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 :

<a href="https://i.stack.imgur.com/RKTa2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RKTa2.png" alt="enter image description here"></a>

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

<pre><code>&lt;link type="text/css" href="css/styles.css" rel="stylesheet"&gt;
</code></pre>

blocks|key|95999|text|在主.js文件中使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|96000|app.use('/css',express.static(__dirname+%2B'/css'));|code-block|syntax|javascript|96001|在主.html文件中使用：|96002|<link+rel="stylesheet"+type="text/css"+href="css/style.css"+/>|96003|出现错误的原因是因为您在__dirname之后使用逗号而不是concat+%2B。|96004|entityMap^0|2|3|0|0|2|5|0|0|C|9|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

Use in your main <code>.js</code> file:

<pre><code>app.use('/css',express.static(__dirname +'/css'));
</code></pre>

use in you main <code>.html</code> file:

<pre><code>&lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
</code></pre>

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

blocks|key|96201|text|在您的应用程序或server.js文件中包含以下行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|96202|app.use(express.static('public'));|offset|length|style|CODE|96203|在您的index.ejs中，下面这一行将对您有所帮助：|96204|<link+rel="stylesheet"+type="text/css"+href="/css/style.css"+/>|96205|我希望这对我有帮助，它对我有帮助！|96206|entityMap^0|0|0|Y|0|0|0|1R|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

In your app or server.js file include this line:
<code>app.use(express.static('public'));</code>
In your index.ejs, following line will help you:
<code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/style.css&quot; /&gt;</code>
I hope this helps, it did for me!

blocks|key|4602115|text|在您的server.js文件中使用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4602116|​|4602117|app.use(express.static('public'));|code-block|syntax|javascript|4602118|4602119|不使用目录(+__dirname+)，然后在项目文件夹中创建一个新文件并将其命名为public，然后将所有静态文件放入其中|4602120|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

Use this in your server.js file 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>app.use(express.static('public'));</code></pre>
</div>
</div>


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

blocks|key|4602131|text|这很简单，如果你使用的是express.static(__dirname+%2B+'public')，那么不要忘了在public前加上一个正斜杠，也就是express.static(__dirname+%2B+'/public')，或者使用express.static('public')，它也可以工作，而且不要改变CSS链接的任何东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4602132|entityMap^0|C|10|22|11|38|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|4602353|text|注册路由的顺序很重要。在静态文件之后注册404路由。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4602354|正确的顺序：|4602355|app.use("/admin",+admin);
...

app.use(express.static(join(__dirname,+"public")));

app.use((req,+res)+=>+{
++res.status(404);
++res.send("404");
});|code-block|syntax|javascript|4602356|否则所有不在路由中的东西，比如css文件等等。，将变成404。|4602357|entityMap^0|K|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

the order of registering routes is important . register <code>404</code> routes after static files.
correct order:
<pre><code>app.use(&quot;/admin&quot;, admin);
...

app.use(express.static(join(__dirname, &quot;public&quot;)));

app.use((req, res) =&gt; {
 res.status(404);
 res.send(&quot;404&quot;);
});
</code></pre>
otherwise everything which is not in routes , like css files etc.. , will become 404 .

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

From app.js

<pre><code>app.use(express.static(path.join(__dirname, 'public')));
</code></pre>

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

<pre><code>&lt;link rel="stylesheet" type="text/css" href="/css/style.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/public/css/style.css" /&gt;
</code></pre>

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

<pre><code>.
./app.js
./public
 /css
 /style.css
</code></pre>

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

文件系统

服务器

路由

我正在尝试按照的说明进行操作，但仍然无法加载我的styles.css。来自app.jsapp.use(express.static(path.join(__dirname, 'public')));在我的.ejs中，我已经尝试了这两行<link rel="stylesheet" type="text/css" href="/css/style.css" /><link rel="styleshee

问如何使用node、express和ejs包含css文件？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用node、express和ejs包含css文件？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用node、express和ejs包含css文件？
EN