為什么要用astro和windicss就不說了，我的跑起來生效了，直接進(jìn)入正題。
國內(nèi)astro文檔太少了，做點貢獻(xiàn)。
有圖有真相：
crrczsw_174762384042.png
要安裝的依賴及相關(guān)項參考：
安裝依賴 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"
}
}
其它項目相關(guān)文件如下：
// 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使用自適應(yīng)斷點參考：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
