@unocss/webpack

The Webpack plugin for UnoCSS.

This plugin does not come with any default presets.

Currently, this plugin only supports the global mode

Installation

npm i -D unocss @unocss/webpack

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default

module.exports = {
  plugins: [
    UnoCSS({ /* options */ }),
  ],
  // for Webpack 4
  css: {
    extract: {
      filename: '[name].[hash:9].css',
    },
  },
  // for Webpack 5
  optimization: {
    realContentHash: true,
  },
}

If you are using webpack@4.x, the optimization.realContentHash configuration is not supported, And you should use css.extract.filename to customize css filename(We use first 9 letter of hashcode instead of contenthash as example). Be aware of this known issue with bundle and webpack#9520.

Add uno.css to your main entry:

// main.ts
import 'uno.css'

Or you can have the config file in uno.config.ts or uno.config.ts.

License

MIT License © 2021-PRESENT Anthony Fu