外部CSS在NodeJS中不起作用

时间:2018-04-27 09:40:32

标签: html css node.js

我的nodeJS项目中的html页面使用了外部css文件。以下是我的文件结构

ProjectFolder  
----server.js  
----index.html  
----style.css

我的server.js文件正在关注

var http = require('http');
var fs = require('fs');
var $ = require('jquery');

function onRequest(request, response) {
 response.writeHead(200,{'Content-Type':'text/html'});
 fs.readFile('./index.html',null, function (error,data) {
    if(error){
        response.writeHead(404);
        response.write('File not found')
    } else {
        response.write(data);
    }
    response.end();
 });
}

http.createServer(onRequest).listen(8081);

我的html页面正在关注

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href='style.css'>
<script src="https://ajax..."></script>
<script>
   ........ 
</script>

</head>
<body>
<div id="inputDiv">
<h1>User Details</h1>
</div>
</body>
</html>

我的css文件正在关注

div {padding-bottom: 10px}
label {float: left; width: 6em; text-align: right;padding-right: 4px}
input {text-align: left;}
textarea {alignment: right;}

当我运行node server.js并访问index.html时,它会加载没有css样式的html页面。但我尝试在nodejs之外打开我的html页面(只在浏览器中)然后我可以看到样式。我的代码中有什么问题?

1 个答案:

答案 0 :(得分:1)

您的网络服务器不提供CSS文件。尝试手动访问它。它不起作用。

从文件系统file:///运行文件时,可以加载style.css,因为它位于同一目录中。

但是当您使用localhost/index.html之类的内容时,浏览器会尝试访问localhost/style.css,但您上面的nodejs服务器将无法处理该文件。

请参阅this回答,这可能对您有帮助。

如果您想使用Express或Koa等实用的Web服务器。