如何使用 node、 Express 和 ejs 包含 css 文件？

我试着按照说明去 https://stackoverflow.com/a/18633827/2063561，但是我仍然不能让我的 styles.css 加载。

来自 App.js

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

在我的. ejs 中，这两句台词我都试过了

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

我在开发者的控制台中注意到类型被设置为‘ text/html’而不是‘ text/css’。

我的道路看起来像

.
./app.js
./public
/css
/style.css
231046 次浏览
小开
最佳答案

在 server.js 文件中使用它

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

然后加上 css

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

不需要/之前 css 喜欢

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

在 server.js 文件中使用它

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

小开

我使用了以下步骤来解决这个问题

  1. 创建新文件夹(静态)并将所有 js 和 css 文件移动到此文件夹。
  2. 然后加入 Use (’/static’，Express.static (‘ static’))
  3. 添加类似 < link rel = “ stylesheet”type = “ text/css”href =”/static/style.css”/>的 css
  4. 重新启动服务器以查看更改后的影响。
小开

如果你使用的是 express.static(__dirname + 'public')，那么不要忘记在 public 之前加上一个正斜杠，即 express.static(__dirname + '/public')或者使用 express.static('public')，它也会起作用; 并且不要改变 CSS 链接中的任何内容。

小开

在主 .js文件中使用:

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

在你的主 .html档案中使用:

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

之所以出现错误，是因为在 __dirname之后使用了逗号而不是 concat + 。

小开

1. 创建一个名为“ public”的新文件夹(如果不存在)。

2. 在新创建的“ public”文件夹下创建一个名为“ css”的新文件夹

3. 在 public/css 路径下创建 css 文件

4. 在你的 html 链接上 <link rel="stylesheet" type="text/css" href="/css/style.css">

//注意，href 之前使用了一个斜杠(/) ，您不需要包含“ public”

5. 在你的应用程序中包括: app.use(express.static('public'));

砰，成功了! ！

小开

以上的回答一半工作，我不是为什么他们没有在我的机器上，但我必须做以下工作。

  1. 在根目录下创建一个目录

    /public/js/

  2. 将其粘贴到您的 server.js 文件中，并使用与上面创建的目录名相匹配的名称。< em > 注意，将 /public添加为第一个参数

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

  3. 最后，在要将 javascript 文件导入到的 HTML 页面中,

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

小开

我们拥有的自定义样式表是本地文件系统中的静态页面。为了让服务器提供静态文件，我们必须使用,

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

在哪里,

Public 是我们必须在根目录中创建的文件夹，它必须有其他文件夹，如 css、 images。.等等

目录结构如下:

enter image description here

然后在 html 文件中，将 style.css 引用为

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

恕我直言，使用 ExpressJS 来回答这个问题只能给出一个粗浅的答案。我将在不使用任何框架或模块的情况下尽可能地回答问题。这个问题之所以经常用一个框架来回答，是因为它去掉了理解“超文本-传输-协议调用”的要求。

  1. 首先应该指出的是，这更多的是围绕“超文本传输协议”的问题，而不是 Javascript。当发出请求时，发送 URL 以及预期的内容类型。
  2. 要理解的第二件事是请求从何而来。通常一个人会请求一个 HTML 文档，但是根据文档内部的内容，文档本身可能会对服务器发出请求，比如: 图像、样式表等等。这个问题涉及到 CSS，因此我们将把重点放在那里。在将 CSS 文件链接到 HTML 文件的标记中，有3个属性。Rel = “ stylesheet”type = “ text/css”and href = “ http://localhost/ ...”对于这个例子，我们将关注 type 和 href。Type 向服务器发送一个请求，让服务器知道它正在请求“ text/css”，而“ href”也告诉它请求在哪里发出。

因此，我们现在知道哪些信息被发送到服务器，现在我们可以在服务器端使用一点 javascript 来分离 css 请求和 html 请求。

var http = require('http');
var url = require('url');
var fs = require('fs');








function onRequest(request, response){
if(request.headers.accept.split(',')[0] == 'text/css') {
console.log('TRUE');


fs.readFile('index.css', (err, data)=>{
response.writeHeader(200, {'Content-Type': 'text/css'});
response.write(data);
response.end();
});
}


else {
console.log('FALSE');


fs.readFile('index.html', function(err, data){
response.writeHead(200, {'Content_type': 'text/html'});
response.write(data);
response.end();
});
};
};


http.createServer(onRequest).listen(8888);
console.log('[SERVER] - Started!');

下面是我可能要求分离的一种方法的一个快速示例。现在请记住，这是一个快速示例，通常会被分割成几个文件，其中一些文件具有对其他文件的依赖函数，但是对于“一言以蔽之”这是我所能做的最好的了。我测试过了，成功了。请记住，index.css 和 index.html 可以与任何您想要的 html/css 文件交换。

小开

对于 NodeJS，我将从 res.url中获得文件名，通过使用 path.extname获得文件的扩展名来编写文件头，为文件创建一个读流，并通过管道传递响应。

const http = require('http');
const fs = require('fs');
const path = require('path');
const port = process.env.PORT || 3000;


const server = http.createServer((req, res) => {
let filePath = path.join(
__dirname,
"public",
req.url === "/" ? "index.html" : req.url
);


let extName = path.extname(filePath);
let contentType = 'text/html';


switch (extName) {
case '.css':
contentType = 'text/css';
break;
case '.js':
contentType = 'text/javascript';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
}


console.log(`File path: ${filePath}`);
console.log(`Content-Type: ${contentType}`)


res.writeHead(200, {'Content-Type': contentType});


const readStream = fs.createReadStream(filePath);
readStream.pipe(res);
});


server.listen(port, (err) => {
if (err) {
console.log(`Error: ${err}`)
} else {
console.log(`Server listening at port ${port}...`);
}
});
小开

在你的 app 或 server.js 文件中包含这一行:

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

在 index.ejs 中，以下行将帮助您:

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

我希望这对我有帮助！

小开

注册路由的顺序很重要。在静态文件后注册 404路由。

正确的顺序:

app.use("/admin", admin);
...


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


app.use((req, res) => {
res.status(404);
res.send("404");
});

否则所有不在路由中的东西，比如 css 文件等，都会变成404。


提交答案