Windi CSS

To use Vike with Windi CSS:

1. Install:

   npm install vite-plugin-windicss windicss

2. Add vite-plugin-windicss to vite.config.js:

   // vite.config.js
    
   import vike from 'vike/plugin'
   import WindiCSS from 'vite-plugin-windicss'
    
   export default {
     plugins: [
       vike(),
       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.

3. Import virtual:windi.css in +onRenderClient.js.

   // renderer/+onRenderClient.js
    
   import 'virtual:windi.css'
    
   // ...

See also

• Windi CSS > Integration for Vite

Example

Example of using Vike with Windi CSS:

• 2022.02 GitHub > brillout/vite-plugin-ssr_windi-css

  vite-plugin-ssr was the previous name of Vike.