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

Question

我正在尝试按照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" />

都不加载 css。我进入开发人员控制台注意到类型设置为“text/html”而不是“text/css”。

我的路径看起来像

.
./app.js
./public
    /css
        /style.css

Answer 1

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

正确的顺序：

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

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

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

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

Answer 2

在您的应用或 server.js 文件中包含以下行：

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

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

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

我希望这对我有帮助！

Answer 3

对于 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}...`);
    }
});

Answer 4

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

1. 首先应该指出的是，这更多是围绕“超文本传输​​协议”的问题，而不是 Javascript。发出请求时，将发送 url 以及预期的内容类型。
2. 要了解的第二件事是请求的来源。最初，一个人会请求一个 HTML 文档，但根据文档中写入的内容，文档本身可能会向服务器发出请求，例如：图像、样式表等。这个问题是关于 CSS 的，所以我们将把注意力集中在那里。在将 CSS 文件链接到 HTML 文件的标签中，有 3 个属性。 rel="stylesheet" type="text/css" 和 href="http://localhost/..." 对于这个例子，我们将重点关注类型和 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 文件交换。

Answer 5

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

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

在哪里，

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

目录结构如下：

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

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

Answer 6

在您的主要.js 文件中使用：

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

在你的主.html文件中使用：

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

出现错误的原因是您在 __dirname 之后使用逗号而不是 concat +。

Answer 7

上面的反应一半有效，我不是为什么他们没有在我的机器上，但我必须执行以下操作。

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

   /public/js/

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

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

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

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

Answer 8

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

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

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

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

//注意href之前使用了斜杠（/），你不需要包含'public'

5.在您的 app.js 中包括： app.use(express.static('public'));

Boom.It 有效！！

Answer 9

如果您使用express.static(__dirname + 'public')，这很简单，那么不要忘记在公共前面加上一个正斜杠express.static(__dirname + '/public') 或使用express.static('public') 它也可以工作； 并且不要更改 CSS 链接中的任何内容。

Answer 10

我已使用以下步骤来解决此问题

1. 创建新文件夹（静态）并将所有 js 和 css 文件移动到此文件夹中。
2. 然后添加 app.use('/static', express.static('static'))
3. 像一样添加css
4. 重启服务器以查看更改后的影响。

Answer 11

在你的 server.js 文件中使用它

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

没有目录（ __dirname ），然后在您的项目文件夹中创建一个新文件并将其命名为 public，然后将所有静态文件放入其中

Answer 12

在你的 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" />