使用Deno、Oak与Denjucks时CSS样式不生效的问题排查

你的问题出在当前的Oak服务器逻辑上——不管客户端请求什么路径（比如/style.css），服务器都会返回渲染后的index.html内容。浏览器请求CSS文件时，拿到的却是HTML文本，自然会抛出MIME类型不匹配的警告，样式也无法生效。

我们需要调整服务器逻辑，先处理静态资源（比如CSS文件）的请求，再处理动态页面的请求。Oak提供的send方法可以帮我们轻松实现静态文件托管。

修改你的index.ts代码如下：

import { Application, send } from "https://deno.land/x/oak/mod.ts";
import denjucks from "https://deno.land/x/denjucks/mod.js";

const app = new Application();
const HOST = "http://localhost";
const PORT = 4000;

// 配置denjucks模板引擎
denjucks.configure('', { autoescape: true });

// 第一步：处理静态资源请求
app.use(async (context, next) => {
  try {
    // 尝试从当前目录加载静态文件
    await send(context, context.request.url.pathname, {
      root: `${Deno.cwd()}`,
      index: "index.html",
    });
  } catch {
    // 如果静态文件不存在，继续执行下一个中间件
    await next();
  }
});

// 第二步：处理动态页面请求（根路径）
app.use(async (context) => {
  if (context.request.url.pathname === "/") {
    const res = denjucks.render("index.html", { txt: "World" });
    context.response.body = res;
  }
});

console.log(`Server started at: ${HOST}:${PORT}`);
await app.listen({ port: PORT });

• 新增的静态资源处理中间件会优先尝试匹配请求路径对应的文件（比如/style.css），如果找到就返回对应的文件，并自动设置正确的MIME类型。
• 如果请求的路径不是静态文件（比如根路径/），就会进入下一个中间件，返回渲染后的动态页面。
• 这样浏览器请求style.css时，就能拿到正确的CSS文件，MIME类型警告会消失，样式也能正常生效。

运行修改后的代码：

deno run --allow-all index.ts

再刷新浏览器，就能看到页面背景变成tomato色，控制台的警告也消失了。

内容的提问来源于stack exchange，提问作者ashok kumar