如何在开发过程中将css作为http文件注入而不是内联样式标记注入

Question

开发过程中的Vite Bundler环境

Vite环境将CSS作为内联插入到页面中：

<style type="text/style"> //css code.. </style>

如何将CSS作为HTTP文件注入页面？

<link rel="stylesheet" href="chunk-23dwdw.css">

这样做的目的是使文件可用于chrome开发，而不是很难调试的内联代码。

Answer 1

尝试使用import在javascript文件中生成CSS文件，

这将在生产上部署时创建一个新文件.css。

import css from "./style.css";

例如，

自动执行npm run build。它将使用缩小的代码。(区/文件夹)

如果您使用<style>，它不会被缩小。

例如：

<style>
#test {
  color: red
}
</style>

或

<style>
@import url("./style.css");
</style>

它不会被缩小(但如果在javascript内部是的话)

如何导入

• ：

• vite在npm run build (不是运行dev)之后创建CSS缩小的文件：

• 这里的CSS代码都在一行中：