19

我正在尝试为模板制作一个带有 node、express 和 ejs 的简单服务器。我已经让服务器指向页面，加载它，甚至可以使用 include 语句生成其他代码。但是由于某种原因，样式表不会加载。

应用程序.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");

ejs 文件位于目录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>

并且 style.css 位于相对于 app.js 的 styles/style.css 目录中

p {
  color:red;
}

我已经尝试了我可以为链接的 href 设想的每条路径，包括相对于我的本地主机相对于 app.js 相对于 board.ejs 指向的位置，甚至只是 style.css，但似乎没有一个有效。非常感谢任何建议。

4

5 回答 5

50

声明一个静态目录：

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

<link rel='stylesheet' href='/style.css' />
于 2012-11-21T06:03:08.637 回答
12

在 app.js 中：

 you must first declare static directory 

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

在 ejs 文件中：

<link rel='stylesheet' href='/styles/style.css' />
于 2013-06-24T01:51:04.463 回答
0

要为您的应用程序依赖项（如 css、img 等）设置入口点，请将以下行添加到您的 server.js（或曾经使用过的）中。

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

这告诉从 server.js 所在的当前目录获取 css 文件。因此，您可以在 html 文件中定义 css 的相对路径。

于 2020-02-25T02:22:29.190 回答
0

最近我正在处理同样的事情，我的 CSS 无法正常工作。最后，我得到了诀窍。我的静态路径如下所示，

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

我的文件夹结构就像

在此处输入图像描述

诀窍是快速访问只定义了静态路径，在我的情况下，CSS 在公共之外，所以它不起作用，突然我将 CSS 文件夹移动到我的公共文件夹中，就是这样。工作精美。

上面的示例仅适用于一个静态路径。对于多个静态路径，您可以使用下面的代码

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);

我的通用 HTML 文件是

<!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>
于 2019-09-19T09:42:43.450 回答
0

使用 Express 4，您可以通过在 app.js 文件中使用以下内容轻松进行设置。

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

在创建 require 常量并声明 express 应用程序之后，将其放在文件的早期。

它在路径对象的帮助下声明了一个静态目录，让您拥有一个可以使用所有前端资源的地方。它还为它提供了一个可以在站点前面使用的虚拟目录名称 (/static)，而不是您在项目中看到的物理名称 (/pub)。

在您的模板中，您可以在脑海中执行类似的操作

    <link rel="stylesheet" href="/static/css_bundle.css"/>
于 2021-02-23T23:18:15.243 回答