将 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 文件路径是否正确。但是，我想改用 index.pug 文件中所示的“link()”语法。

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 一起服务时，也最好使用absolute paths。

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

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

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

您也可以通过指定挂载点来考虑virtual path：

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

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