Vite css response configuration

userOM5G 0
Viewed 42

When i'm asking a css-file this way

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);

Everything is ok.

#ggg{font-size: 50px;}

But when this way

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

The response looks like

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))

Is there a way to configure vite to respond in the second example like in the first example?

vite css
1 Answers

Because vite has two strategies on css:

  • if a css request include text/css header, vite will inject css style code into directly, so you get the first result.
  • otherwise, vite will add a .js extension to css file, and treat it as a js, so you will see the second result.

if you want to know more details, please see source code

Karott0
Related