UnoCSSWebpack Plugin
The webpack plugin for UnoCSS: @unocss/webpack. Currently, this plugin only supports the global mode.
INFO
This plugin does not come with any default presets.
Installation
bash
pnpm add -D @unocss/webpackpnpm add -D @unocss/webpackbash
yarn add -D @unocss/webpackyarn add -D @unocss/webpackbash
npm install -D @unocss/webpacknpm install -D @unocss/webpackts
// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
optimization: {
realContentHash: true,
},
}// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
optimization: {
realContentHash: true,
},
}ts
// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
css: {
extract: {
filename: '[name].[hash:9].css',
},
},
}// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS(),
],
css: {
extract: {
filename: '[name].[hash:9].css',
},
},
}Create a uno.config.ts file:
ts
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})WARNING
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). Beware this known issue with bundle and webpack#9520.
Usage
Add uno.css to your main entry:
ts
// main.ts
import 'uno.css'// main.ts
import 'uno.css'