Integration for Webpack

About

The webpack plugin aims to be a language and framework agnostic solution to implement Windi CSS.

⚠️ While it should work for most setups, some setups do have issues and more have not been tested. Caution should be used if you aren't using one of the passing solutions below.

Language / FrameworkExample
Vue 2 - Vue CLIvue.config.js
Vue 2 - Nuxt⚠️ Use Nuxt.js Module
Vue 3 - Vue CLIvue.config.js
React - Nextnext.config.js
Svelte⚠️ Use svelte-windicss-preprocess
Angular❌ style-loader misconfiguration

Installation

Add the package:

yarn add -D windicss-webpack-plugin 
# npm i -D windicss-webpack-plugin 

Then, if you have access to modify the webpack.config.js directly, then you would do the following.

// webpack.config.js
import WebpackWindiCSSPlugin from 'windicss-webpack-plugin'

export default {
  // ...
  plugins: [
    new WindiCSSWebpackPlugin([
      // options
    ]),
  ],
}

Within an entry point file or something only loaded once, add the import of windi.css. For this, to work you need to be using a style-loader with modules off.

// main.js
import 'windi.css'

Configuration

The webpack plugin provides the same configuration API as the vite plugin.

See options.ts for configuration reference.