如何在 node.js 中加载 CSS 文件？答案

【问题标题】：How to load CSS file in node.js?如何在 node.js 中加载 CSS 文件？
【发布时间】：2019-09-19 23:00:34
【问题描述】：

我不明白为什么无法加载 css 文件。

我的目录和文件是...

/nodejsExample  
   /css  
     intro.css     
   home.html  
   main.js

下面的代码...

main.js

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

    function templateHTML(description, queryDataid){
        var _template=`
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>11</title>   
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">

    </head>
    <body>
        ${description}
    </body>
    </html>
    `;
        return _template;
    }

    var app = http.createServer(function(request, response){
        var path = require('path');
        var _url = request.url; //
        var queryData = url.parse(_url, true).query;
        var pathname = url.parse(_url, true).pathname;
        console.log("1. "+pathname);
        console.log("2. "+queryData.id);

        if(pathname === '/'){

            if(queryData.id === undefined){ //홈화면일때

                    var title = 'Welcome to esseltree';
                    var description = fs.readFileSync("home.html","utf-8"); // home.html을 description에 대입한다.

                    var template = templateHTML(description, queryData.id);
                    response.writeHead(200);
                    response.end(template);

            }
            else{ // 홈화면이 아닐때
                var title = queryData.id;
                fs.readFile(`html/${queryData.id}`, 'utf-8', function(err, description){
                    var template = templateHTML(description, queryData.id);
                    response.writeHead(200);
                    response.end(template);

                });             

            }
        }
        else{
            response.writeHead(404);
            response.end('end.....');

        }
    });
    app.listen(80);

home.html

 <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">
        <link rel="stylesheet" href="../css/intro.css" type="text/css" > 
    </head>
    <body>
            <div class="ui inverted vertical masthead center aligned segment" id="catalina">
                <div class="ui text container">
                    <h1 class="ui inverted header">에셀나무그룹홈</h1>
                    <h3 class="ui inverted header">누구보다 빛날 아이들의 공간</h1>
                    <div class="huge ui inverted button">자세히 알아보기<i class="angle right icon"></i>    </div>
                </div>

            </div>




            <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
        </body>
    </html>

intro.css

.ui.masthead.segment .ui.header{
    text-color: red;
}

我想打开应用了 css 文件的 home.html。它在这些代码中不起作用。我还检查了 chrome 检查 (F12) 和选项卡式网络选项卡，但我发现 intro.css 的状态是 404。任何建议都会有所帮助！

附言我认为下面的代码可能与解决方案有关。

if(path.extname(url)==='.css'){
    console.log('run');
    response.writeHead(200,{"Content-type" : "text/css"});
}
else
    response.writeHead(200);

【问题讨论】：

不要认为你需要'..''
href="../css/intro.css" 是这里的问题。您正在 nodejsExample 目录之外搜索文件。
@FurkanPoyraz 那么如何更改代码？我将其更改为 href="css/intro.css" ，它也不起作用！
@YoonjongLee 将其更改为 href="/css/intro.css" 如果您的文件结构与您的帖子中的一样，应该可以工作。
@FurkanPoyraz 我试过但没用:(你能检查一下javascript代码是否可以在我的代码中加载css文件吗？我认为我的js文件没有任何代码来导入css文件.

标签： javascript html css node.js

【解决方案1】：

var server = http.createServer(function (request, response) {
    fs.readFile('./' + request.url, function(err, data) {
        if (!err) {
            var dotoffset = request.url.lastIndexOf('.');
            var mimetype = dotoffset == -1
                            ? 'text/plain'
                            : {
                                '.html' : 'text/html',
                                '.ico' : 'image/x-icon',
                                '.jpg' : 'image/jpeg',
                                '.png' : 'image/png',
                                '.gif' : 'image/gif',
                                '.css' : 'text/css',
                                '.js' : 'text/javascript'
                                }[ request.url.substr(dotoffset) ];
            response.setHeader('Content-type' , mimetype);
            response.end(data);
            console.log( request.url, mimetype );
        } else {
            console.log ('file not found: ' + request.url);
            response.writeHead(404, "Not Found");
            response.end();
        }
    });
}

【讨论】：