如何通过express.static将静态CSS添加到Node JS应用

Question

I have a node.js app with a static css file. 我有一个带有静态CSS文件的node.js应用程序。 When I create a middleware and call the css file, it is geeting an error as follows: 当我创建一个中间件并调用css文件时，它会出现如下错误：

Refused to apply style from ' http://localhost:3000/files/style.css ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 拒绝从' http：// localhost：3000 / files / style.css '应用样式，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

Here is my app.js file 这是我的app.js文件

var express = require ('express');

var app = express();

app.set('view engine', 'ejs');
app.use('/files', express.static('/files'));

app.get('/', function(req, res){
    res.render('index');
});

app.listen(3000);

index.ejs index.ejs

<!DOCTYPE html>
<html>
<head>
    <title>New page</title>
    <link rel="stylesheet" type="text/css" href="files/style.css">
</head>
<body>
    <p>New style</p>
</body>
</html>

When I use URL : http://localhost:3000/files/style.css 当我使用URL时： http：// localhost：3000 / files / style.css

Display " Cannot GET /files/style.css " and when checking in the console's network tab, it says styles.css not found. 显示“ Cannot GET /files/style.css ”，并在控制台的“网络”选项卡中签入时，显示找不到styles.css。 This happens when I add static javascript files too. 当我也添加静态javascript文件时，就会发生这种情况。

I also tried this with follows 我也尝试了以下

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

and none of them has worked so far. 到目前为止，它们都没有起作用。

How can I solve this? 我该如何解决？

Answer 1

You try to get file from files/files/files/style.css 您尝试从files/files/files/style.css获取文件

Try code below: 请尝试以下代码：

NodeJs: 的NodeJS：

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

HTML: HTML：

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

如何通过express.static将静态CSS添加到Node JS应用

问题描述

1 个解决方案

解决方案1
0 2019-01-13 07:52:00

如何通过express.static将静态CSS添加到Node JS应用

问题描述

1 个解决方案

解决方案1 0 2019-01-13 07:52:00

解决方案1
0 2019-01-13 07:52:00