Question

我正在初学者节点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>
<meta charset = "utf-8">
<title> My Website <%= title %> </title>
<link rel="stylesheet" href="/app.css" type="text/stylesheet">
</head>

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

Answer 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">

Answer 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">

Answer 3

要使用要用作公用文件夹一部分的目录的绝对路径，请执行以下操作：

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

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

您可以像以下方式访问style.css：

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

如何在节点中将CSS链接到EJS模板

3 个答案: