在 node.js 中加载 html 样式表答案

【问题标题】：Loading html stylesheets in node.js在 node.js 中加载 html 样式表
【发布时间】：2017-12-05 10:57:25
【问题描述】：

我是 node.js 的初学者，我正在 w3schools 学习它。

最近在学习File System的时候，碰到了fs.readFile方法。作为它的第一个参数，我为它提供了一个指向先前创建的 html 文件的链接。现在该文件附加了一个css样式表，我编辑了它的href（显然）。这标志着我的问题的开始。

在多个网站大量阅读并多次编辑我的代码后，这是我的代码的最终版本。

我的js、html和css如下——

var http = require('http'),
    fs = require('fs'),
    path = require('path'),
    express = require('express'),
    app = express();

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

http.createServer(function (req, res) {
    fs.readFile('.CSS Transitions - timing function.html', function (err, data) {
        res.writeHead(200, {'Content-Type' : 'text/html'});
        res.end(data);
    });
}).listen(8080);

console.log('Server running at =>\n                         localhost:8080\nCtrl + C to quit');

a
{
	transition : color 1s, font-size .5s;
	transition-timing-function : ease;
	color : black;
	font-size : 30px;
}

a:hover
{
	color : red;
	font-size : 40px;
}

<!DOCTYPE html>


<html>
	<head>
		<title>Transition</title>
		<link rel='stylesheet' type='text/css' href='css/CSS Transitions - timing function.css'>
	</head>
	<body>
		<h2>Links</h2>
		<ul>
			<li><a href='http://www.htmldog.com'>HTML-Dog</a></li>
			<li><a href='http://www.imdb.com'>IMDb</a></li>
			<li><a  href='http://www.youtube.com'>YouTube</a></li>
		</ul>
	</body>
</html>

我的目录结构是

js file
html file
/public
    /css
        css file

问题 >> 无论我做什么，我的 css 文件都没有加载。这是常见的错误-

资源被解释为样式表，但使用 MIME 类型 text/html 传输：“http://localhost:8080/css/CSS%20Transitions%20-%20timing%20function.css”。

不知道该怎么办了。我从2天开始就一直在做，请帮助！！

【问题讨论】：

标签： javascript html css node.js

【解决方案1】：

您的文件名中可能不应该有空格，但这不是重点。看起来你想做的是serve a static file.

既然你已经这样做了

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

那么只要这一行就好了。删除整个 http.createServer 方法，它应该可以正常工作。

href='/css/CSS Transitions - timing function.css'

根本不需要乱搞fs。

编辑

我认为使用 express 执行此操作的首选方法是我上面写的，但也许将标头类型从 text/html 更改为 text/css 也可以吗？

【讨论】：

嘿伙计，对不起，我之前没有意识到这一点，但您的解决方案是一次处理所有静态文件的快捷方式。谢谢。干杯。
@Lorenz Meyer 我试图将两者都标记为正确答案，但这样做我意识到它不是那样工作的。无论如何，我要感谢 Khauri McClain。

【解决方案2】：

为什么同时使用 express 和 http 模块？已经被 http 模块包裹的 express 模块。所以你可以使用 express 模块而不是 http。这里是使用 express 模块的示例。

// proper way in server.js

var fs = require('fs');
var fs = require('express');
var fs = require('path');

var app = express();

app.use('/app', function(req, res){
    res.sendFile(path.resolve(__dirname, './html/app.html')); // put your app.html's relative path
})

app.use('/app.js', function(req, res){
    res.sendFile(path.resolve(__dirname, './js/app.js')); // put your app.js's relative path
})

app.use('/app.css', function(req, res){
    res.sendFile(path.resolve(__dirname, './css/app.css')); // put your app.css's relative path
})

app.listen(9090, function(err){
    if(err) console.log(err);
    console.log('listening at http://localhost:9090/app');
})

// app.html

<html>
     <head>
          <script src='/app.js'/>
          <link href='/app.css'/>
     </head>
     <body>
          // your elements
     </body>
</html>

【讨论】：

非常感谢你。它完美地工作。虽然，我想知道是否可以使用 fs.readFile() 方法来提供静态文件。
当然，你的想法是对的。但是您使用 http 模块创建服务器，您的响应对象没有 sendFile 方法。所以你必须使用“ var file = fs.readFile() ”，然后用res“ res.send(file) ”发送文件。但是您使用了 express 模块，它包装了 http 模块并在您的请求和响应对象中公开了很多方法。此时响应对象具有 sendFile 方法。所以你可以使用 res.sendFile() 而不是 fs.readFile()。