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

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

Answer 2

对于 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 3

我已经按照以下步骤解决了这个问题

创建一个新文件夹（静态），并将所有js和css文件移动到该文件夹中。
然后添加 app.use（'/ static'，express.static（'static'））
添加之类的CSS，
重新启动服务器以查看更改后的影响。

Answer 4

在主.js文件中使用

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

在您的主要.html文件中使用

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

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

Answer 5

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

2。在新创建的“公共”文件夹下创建一个名为“ 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'));

景气。它有效！

Answer 6

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

首先要指出的是，与“ Java脚本”相比，这是围绕“超文本传输协议”的更多问题。发出请求时，将发送url以及所需的内容类型。
要了解的第二件事是请求来自何处。通常，一个人会请求一个HTML文档，但是根据文档中写的内容，文档本身可能会向服务器发出请求，例如：图像，样式表等。这个问题是关于CSS的，因此我们将重点放在这里。在将CSS文件链接到HTML文件的标签中，有3个属性。 rel =“ stylesheet” type =“ text / css”和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文件交换。

Answer 7

在server.js文件中使用它

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

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

Answer 8

如果您使用的是express.static(__dirname + 'public')很简单，那么不要忘了在公众面前使用express.static(__dirname + '/public')前面的斜杠或使用express.static('public')也可以使用；并且不要更改CSS链接中的任何内容。

Answer 9

以上回复有效了一半，我不知道为什么它们不在我的机器上，但我必须执行以下操作。

在根目录下创建目录

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

app.use('/public',express.static('public'));
最后，在将JavaScript文件导入到的HTML页面中，

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

Answer 10

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

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

其中

public是我们必须在根目录中创建的文件夹，并且必须具有css，images..etc等其他文件夹

目录结构如下：

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

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

Answer 11

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

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

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

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

我希望这对我有帮助！

Answer 12

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

正确的顺序：

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

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

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

否则，不在路由中的所有内容（如css文件等）将变为404。

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

12 个答案: