⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

Windi CSS

To use vite-plugin-ssr with Windi CSS:

  1. Install:

    npm install vite-plugin-windicss windicss

  2. 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.

  3. Import virtual:windi.css in _default.page.client.js.

    // renderer/_default.page.client.js

import 'virtual:windi.css'

// ...

See also

Example

Example of using vite-plugin-ssr with Windi CSS: