本地 CSS 或 JS 的 MIME 类型错误阻止在使用 NodeJs 时加载自定义样式

Question

我整个星期都在为这个错误绞尽脑汁！我的计划是创建一个简单的 'send email from nodejs' 应用程序。我运行遇到的问题是 mime 类型的错误 我的 style.css。错误说它是 text/html 格式。我像往常一样从 'npm init -y' 和 'npm install express nodemailer nodemailer-mailgun-transport -S' 开始。我还创建了 'server.js'、'index.html' 和 'style.css'（请参见下面的代码）。就是这样。该应用程序按预期工作，linking bootstrap cdn 也可以工作。只是我的习惯css让我很为难。所以为了简化它，我什至从 w3schools

中拿了一个 copy/paste html 模板

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body> 
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

style.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

server.js

const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(PORT);

package.json

{
  "name": "SendMail",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "nodemailer": "^6.4.15",
    "nodemailer-mailgun-transport": "^2.0.1"
  },
  "style": "style.css"
}

Chrome中的错误：

我尝试过的：

隔离 html/css 部分以确保代码正常。是的，是！
尝试使用 link 风格。包括此解决方法：
通过 javascript 更改 mime 类型，例如：
如上所示在 package.json 中附加样式部分

编辑：内联样式和 JS 按预期工作。估计跟express有关系。

还有什么我可以尝试的吗？如果您需要其他信息，请告诉我。提前致谢！

Answer 1

提供静态文件（如图像、css 等）时，通常最好将这些文件放在名为 public 或 static 或任何您喜欢的专用目录中。然后你需要明确地告诉你的快递应用程序从那里提供文件，如下所示：

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

所以你的 server.js 变成：

const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');

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

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(PORT);

然后你可以在 index.html:

中这样调用你的 CSS 文件

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="public/style.css" />
  </head>
  <body> 
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Answer 2

晚上好）只需将 html/css 的文件夹设为 public。

const express = require('express');
const app = express();
const PORT = 3000;
const path = require('path');

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

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(PORT);

本地 CSS 或 JS 的 MIME 类型错误阻止在使用 NodeJs 时加载自定义样式

MIME type error for local CSS or JS prevents loading custom styles when working with NodeJs

css

mime

styles

node.js

mime-types