Windi CSS

1. 安装：

   npm install vite-plugin-windicss windicss

2. 把 vite-plugin-windicss 添加到 vite.config.js：

   // vite.config.js
   
   import ssr from "vite-plugin-ssr/plugin";
   import WindiCSS from "vite-plugin-windicss";
   
   export default {
     plugins: [
       ssr(),
       WindiCSS({
         scan: {
           // 默认情况下只有 `src/` 目录下被扫描
           dirs: ["pages"],
           // 我们只需要指定实际使用的文件扩展名
           fileExtensions: ["vue", "js", "ts", "jsx", "tsx"],
         },
       }),
     ],
   };

   确保你的所有文件都在 scan.dirs 中

   这些选项设置也可以定义在 windi.config.js 中

3. 在 _default.page.client.js 中 import virtual:windi.css

   // renderer/_default.page.client.js
   
   import "virtual:windi.css";
   
   // ...

另请参考：

• 在 Windi CSS 中使用 vite-plugin-ssr 的例子：github.com/brillout/vite-plugin-ssr_windi-css.
• WindiCSS Vite 指南.