To use vite-plugin-ssr with Windi CSS:
Install:
npm install vite-plugin-windicss windicss
Add vite-plugin-windicss
to 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: {
// By default only `src/` is scanned
dirs: ["pages"],
// We only have to specify the file extensions we actually use.
fileExtensions: ["vue", "js", "ts", "jsx", "tsx"]
}
})
]
}
Make sure that all your files are included in
scan.dirs
.
These options can also be defined in
windi.config.js
.
Import virtual:windi.css
in _default.page.client.js
.
// renderer/_default.page.client.js
import 'virtual:windi.css'
// ...
Example of using vite-plugin-ssr
with Windi CSS: