javascript - 将 CSS 文件链接到 PUG 文件有问题吗？

Question

我正在尝试使用“链接”语法将 CSS 文件链接到 PUG 文件。当我尝试这样做时，我收到以下错误消息:

“拒绝应用来自‘http://localhost:3000/CSS/styles.css’的样式，因为它的 MIME 类型(‘text/html’)不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。”

• 我试过包含属性 type="text/css"。没用
• 我尝试使用以下语法验证 css 文件路径是否正确:

    style
        include ../CSS/styles.css

这有效，并允许我确定 css 文件路径是否正确。但是，我想改用“link()”语法，如我的 index.pug 文件中所示。

index.pug 头:

    head
        link(rel='stylesheet' href='../CSS/styles.css' type='text/css')

app.js 文件:

    const express = require('express');
    const http = require('http');
    const path = require('path');

    const app = express();
    const viewsPath = path.resolve(__dirname, "views");
    app.set("views", viewsPath);
    app.set('view engine', 'pug');

    app.get("/", function (request, response) {
        response.render("index");
    });
    http.createServer(app).listen(3000);

Answer 1

您需要将您的 css 文件作为 static 服务器。与 express 一起使用时，也最好使用 绝对路径。

假设您的 Dashboard 仅包含可以安全地暴露在网络上的文件。

app.use(express.static('Dashboard'))

// In your html, note absolute path
href='/CSS/styles.css'

您还可以通过指定挂载点来考虑虚拟路径:

app.use('/static', express.static('Dashboard'))

// html
href='/static/CSS/styles.css'