我使用的是deno， oak和denjucks。文件结构如下
index.html
index.ts
style.css
我所使用的代码如下 - index.ts is- 。
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";
denjucks.configure('', { autoescape: true });
const PORT = 4000;
let res = denjucks.render("index.html", {txt: "World"});
app.use(async (context) => {
context.response.body = res;
});
console.log(`Server started at: ${HOST}:${PORT}`);
await app.listen({ port: PORT });
索引.html -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>Document</title>
</head>
<body>
<h1>{{txt}}</h1>
<h1>Hello World</h1>
</body>
</html>
style.css -
body{
background: tomato;
}
当我执行代码deno运行--allow-all index.ts时，在chrome开发者工具控制台出现了一条警告信息-------。资源解释为样式表，但以MIME类型texthtml传输。"http:/localhost:4000style.css。".而css代码却不适用。这个故障背后的原因不清楚。
你所有的路由都在服务 text/html既然你总是用 denjucks.render("index.html", {txt: "World"});所以，当你要求 style.css 你的'回应是 index.html
你需要建立一个 静态文件中间件 所以 ./style.css 可以正确服务。
app.use(async (context) => {
await send(context, context.request.url.pathname, {
root: `${Deno.cwd()}`
});
});
app.use(async (context) => {
context.response.body = res;
});