如何将css链接到节点中的ejs模板答案

【问题标题】：How to link css to ejs templates in node如何将css链接到节点中的ejs模板
【发布时间】：2019-07-14 17:03:38
【问题描述】：

我正在开发一个初学者节点 js 服务器。我能够使用 ejs 模板呈现动态 html，但我无法将 css 样式链接到它们

我已经建立了一个公共目录来存储图片和外部 css 文件等资产。我已经链接到静态内容来表达使用

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

我的公用文件夹有图像（.jpg），但无法渲染公用文件夹中的 css。

file structure : 
node_modules
models
views
public > app.css, hero.jpg
server.js
package.json

快递应用如下：server.js

const express = require('express');
const app = express();
const ejs = require('ejs');
app.use('/public', express.static(__dirname + '/public');
app.set("view engine", "ejs");
app.set('views',__dirname+'/views');
app.get('/', (req,res) =>{
   res.render('home',{
        title: "HomePage",
        date : new Date().getFullTYear()
        }
app.listen(3000);

home.ejs 文件的 head 部分为：

<head>
<meta charset = "utf-8">
<title> My Website <%= title %> </title>
<link rel="stylesheet" href="/app.css" type="text/stylesheet">
</head>

我希望 app.css 像 home.ejs 文件一样加载。但它不起作用

【问题讨论】：

标签： css node.js express ejs

【解决方案1】：

查看您的代码，我猜您将静态文件夹设置为 /public。

尝试修改你的css链接到<link rel="stylesheet" href="/public/app.css" type="text/stylesheet">

或尝试像这样设置静态文件配置：

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

然后<link rel="stylesheet" href="/static/app.css" type="text/stylesheet">

【讨论】：

【解决方案2】：

你应该这样声明你的公用文件夹

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

这意味着您可以像在根文件夹中一样提供这些文件。所以你可以通过这种方式链接你的 CSS 和图片

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


// in case of image
<img src="/hero.jpg">

当你像这样声明公用文件夹时

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

您为您的文件设置了一个虚拟路径前缀，在这种情况下，您必须在每个文件的 url 路径中添加 public，例如 <link rel="stylesheet" href="/public/app.css" type="text/stylesheet">

【讨论】：

【解决方案3】：

要使用要作为公用文件夹一部分的目录的绝对路径：

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

在根文件夹下创建公用文件夹。如果需要，在该文件夹下创建 css 文件夹。所以，结构将是链接public/css/style.css

您可以访问style.css 喜欢：

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

【讨论】：