Vite css响应配置

Question

当我这样问css文件的时候

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/test/data/tst.css?', false);
xhr.setRequestHeader("Accept","text/css,*/*")
xhr.send();
console.log(xhr.response);

一切都很好。

#ggg{font-size: 50px;}

但当这条路

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/test/data/tst.css?', false);
xhr.setRequestHeader("Accept","*/*")
xhr.send();
console.log(xhr.response);

反应看上去就像

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/test/data/tst.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/home/user/dev/project/front/test/data/tst.css"
const __vite__css = "#ggg{font-size: 50px;}"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))

是否有一种方法可以像在第一个示例中那样配置vite以响应第二个示例？

Answer 1

因为vite对css有两种策略：

• 如果一个css请求包含text/css头，则vite将直接将css样式代码注入其中，因此您将得到第一个结果。
• 否则，vite将向css文件添加一个.js扩展，并将其视为js，因此您将看到第二个结果。

如果您想了解更多细节，请参见源代码