拒绝应用来自 'http://localhost:3000/css/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型答案

【问题标题】：Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type拒绝应用来自 'http://localhost:3000/css/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
【发布时间】：2018-12-11 02:20:25
【问题描述】：

我只是在创建一个示例网站模板，并在 Chrome 控制台中收到此错误：

Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

尝试加载 css/style.css 页面时出现 404 错误，但路径似乎正确。以下是网站的一些基本代码：

应用：

var express = require('express');
var app = express();

var exphbs  = require('express-handlebars');
var path = require('path');

app.engine('hbs', exphbs({extname:'hbs'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

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

app.get('/', function(req, res) {
  res.render('resume.hbs')
})

app.listen(3000)

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <base href="/">
    <link rel="stylesheet" href="..\css\style.css" type = "text/css">
    <title>Example Website</title>
    <h1>Header</h1>
    <hr id = 'headerBorder'>
  </head>
  <body>
  </body>
</html>

CSS：

h1 {
 color: blue
}

下面是文件夹的样子，其中显示了路径。我似乎找不到解决此问题的方法。有什么想法吗？

【问题讨论】：

只是为了澄清你在哪里使用 sass 吗？

标签： javascript html css node.js handlebars.js

【解决方案1】：

将所有的 CSS 文件放在一个文件夹中 - 将其命名为 static 或 public。
所以你的css位于public/css/style.css。
在您的app.js 中，您可以通过以下方式引用静态文件：

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

public 文件夹的路径应该相对于app.js 文件。

【讨论】：

【解决方案2】：

由于您使用的是 hbs，请创建“public”文件夹并将您的静态文件夹、css、javaScript、img 保存在“public”文件夹中。那么

const path = require("path");

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

这就是神奇之处，因为您告诉 express 使用“public”作为静态文件夹，当您链接该文件夹内的文件时，hbs 会将“public”文件夹作为“根”文件夹。因此，当您链接 main.css 时，假设您在文件夹“public”、“public/style/main.css”目录中的文件夹“style”中有 main.css：

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

另外，这是 express 中 hbs 的完整设置：

app.set("view engine", "hbs");
app.engine(
  "hbs",
  expressHbs({
    defaultLayout: "layout",
    extname: ".hbs",
    layoutsDir: __dirname + "/views/layouts",
    partialsDir: __dirname + "/views/partials"
  })
);

【讨论】：

【解决方案3】：

这可能只是由于没有预期的路径造成的。

你在这里使用这条线：

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

所以在这种情况下，您需要一个名为“static”的文件夹，在该文件夹中您可以放置您的 css 和图像。您可以按如下方式链接到它们：

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

参考：https://expressjs.com/en/starter/static-files.html

【讨论】：

我也试过了。仍然不起作用，这让我对路径感到担忧。我还尝试在 images 文件夹中使用带有图片的 img 标签，并使用与样式 css 非常相似的路径（即 ../images/image.jpg），但它仍然无法正常工作。有什么想法吗？
已更改答案。您的“静态”文件夹在哪里？

【解决方案4】：

我也尝试更改不同的斜线，但这并不能完全解决问题。可能，引导 CSS 也已经定义了 h1。因此，您需要更改 HTML 中 CSS 文件的顺序：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <base href="/">
    <title>Example Website</title>
    <h1>Header</h1>
    <hr id = 'headerBorder'>
  </head>
  <body>
  </body>
</html>

在 CSS 中仅添加 !important 并不能解决问题。

【讨论】：

我也试过了。仍然不起作用，这让我对路径感到担忧。我还尝试在 images 文件夹中使用带有图片的 img 标签，并使用与样式 css 非常相似的路径（即 ../images/image.jpg），但它仍然无法正常工作。有任何想法吗？可能是路径问题？
我复制了你的文件夹结构，对我来说它就可以了。您是否有机会使用服务器系统对其进行测试？我试过没有。
服务器系统是什么意思？对此非常陌生