你如何使用 express 服务 css 文件？答案

【问题标题】：How do you server css files with express?你如何使用 express 服务 css 文件？
【发布时间】：2019-07-06 03:49:22
【问题描述】：

我已经看到了很多类似的问题，但我所做的似乎没有任何效果。未提供 css 文件。我不断收到以下错误。

拒绝应用样式来自 'http://localhost:7000/public/css/styles.css' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且严格的 MIME 检查已启用。

launch-analytics.js:4 未捕获类型错误：无法读取属性未定义的“父节点” 在启动-analytics.js:4 在 launch-analytics.js:5（匿名）@launch-analytics.js:4（匿名）@launch-analytics.js:5

我的 index.ejs 文件（路径：user/Node/views/index.ejs）

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <link rel="stylesheet" href="public/css/styles.css" type="text/css">
    <body>
        <p>I am the home page</p>
    </body>
</html>

app.js 文件：（路径：用户/节点）

let express = require('express');
let bodyParser = require('body-parser');

let app = express();

let urlencodedParser = bodyParser.urlencoded({ extended: false })


app.set('view engine', 'ejs');

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

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

app.listen(7000);

styles.css 文件：

body{
    background-color: skyblue;
    font-family: verdana;
    color: white;
    padding: 30px;
}
h2{
    font-size: 49px;
    text-transform: uppercase;
    letter-spacing:2px;
    text-align: center;
}
p{
    font-size: 16px;
    text-align: center;
}
.text-field{
    display: flex;
    justify-content: center;
}

【问题讨论】：

为什么style.css文件MIME类型是text/html？
我不知道。我将其指定为 css。
style.css 的内容是有效的 CSS 吗？不是 HTML 吗？
我想是的。我在上面加了。
尝试用<link rel="stylesheet" href="css/styles.css" type="text/css">替换<link rel="stylesheet" href="public/css/styles.css" type="text/css">

标签： node.js express

【解决方案1】：

看起来app.use(express.static('/public')); 指向相对于根目录的目录。改成app.use(express.static(__dirname + '/public'));

【讨论】：

你能从这个<link rel="stylesheet" href="public/css/styles.css" type="text/css">中删除public吗
你的意思是删除公共目录吗？
这样做不会改变任何事情。
从 href 中删除公共
当我使用 <link rel="stylesheet" href="/css/styles.css" type="text/css"> 和 app.use('./public')); 时它起作用了

【解决方案2】：

尝试改变

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

到这里

app.use(express.static(__dirname + "/public"));

也在这里回答：Express-js can't GET my static files, why?

【讨论】：