Astro如何集成windicss

为什么要用astro和windicss就不说了，我的跑起来生效了，直接进入正题。
国内astro文档太少了，做点贡献。
有图有真相：

crrczsw_174762384042.png

要安装的依赖及相关项参考：

安装依赖 npm i -D vite-plugin-windicss windicss

// package.json
{
  "name": "astrotest",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "windicss": "windicss src/ -o public/windi.css --watch" // 这行不知要不要，没测试
  },
  "dependencies": {
    "@astrojs/vue": "^5.0.13", 
    "ant-design-vue": "^4.2.6",
    "astro": "^5.7.13",
    "vue": "^3.5.14",
  },
"devDependencies": {
    "vite-plugin-windicss": "^1.9.4",
    "windicss": "^3.5.6"
  }
}

其它项目相关文件如下：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import WindiCSS from 'vite-plugin-windicss';

// https://astro.build/config
export default defineConfig({
  integrations: [vue()],
  vite: {
    plugins: [WindiCSS()]
  }
});

// windi.config.js
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['src/**/*.{vue,html,jsx,tsx,astro}'],
    exclude: ['node_modules', '.git'],
  },
})

使用参考：

// index.astro
---
import "virtual:windi.css"; // 这行引入样式
---
<html>
<body class="bg-gray-50 min-h-screen">
生效了
</body>
</html>

另外，如果你不想每一页都引入的话可以在layout.astro主组件中引入

---
export interface Props {
  title: string;
}

import "virtual:windi.css"; // 同上
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

参考文档：
windicss使用自适应断点参考：https://juejin.cn/post/7071045543639646239
集成参考：https://github.com/windicss/windicss/issues/638
其它：
https://github.com/withastro/astro/issues/1971
https://github.com/unocss/unocss/issues/105
https://github.com/withastro/astro/pull/6227