GeezerVison is showing unocss.dev — UnoCSS Webpack Plugin Webpack 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. Prerequisite @unocss/webpack requires style-loader and css-loader to handle CSS files.
Installation pnpmyarnnpmbun bashpnpm add -D @unocss/webpack
bashyarn add -D @unocss/webpack
bashnpm install -D @unocss/webpack
bashbun add -D @unocss/webpack
From UnoCSS version v0.59.0, UnoCSS has been moved to ESM-only, you need to load your configuration via dynamic import: webpack 5webpack 4 ts// webpack.config.js
module.exports = function () {
return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
plugins: [
UnoCSS()
],
optimization: {
realContentHash: true
}
}))
}
js// webpack.config.js
module.exports = function () {
return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
plugins: [
UnoCSS()
],
css: {
extract: {
filename: '[name].[hash:9].css'
},
},
}))
}
If you're using older version of UnoCSS, you can use the following code: webpack 5webpack 4 ts// webpack.config.js
const UnoCSS = require('@unocss/webpack').default
module.exports = {
plugins: [
UnoCSS()
],
optimization: {
realContentHash: true
}
}
js// 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: uno.config.ts tsimport { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})
WARNING If you are using [email protected], 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: Frameworks Vue + Vue CLI If you're using Vue CLI with webpack 4/5 with UnoCSS v0.59.0, you need to use the latest Vue CLI Service v5.0.8 to load your configuration with dynamic import: webpack 5webpack 4 ts// vue.config.js
const process = require('node:process')
module.exports = function () {
return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
configureWebpack: {
devtool: 'inline-source-map',
plugins: [
UnoCSS()
],
optimization: {
realContentHash: true
}
},
chainWebpack(config) {
config.module.rule('vue').uses.delete('cache-loader')
config.module.rule('tsx').uses.delete('cache-loader')
config.merge({
cache: false
})
},
css: {
extract: process.env.NODE_ENV === 'development'
? {
filename: 'css/[name].css',
chunkFilename: 'css/[name].css'
}
: true
}
}))
}
ts// vue.config.js
const process = require('node:process')
module.exports = function () {
return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
configureWebpack: {
plugins: [
UnoCSS({})
]
},
chainWebpack(config) {
config.module.rule('vue').uses.delete('cache-loader')
config.module.rule('tsx').uses.delete('cache-loader')
config.merge({
cache: false
})
},
css: {
extract: process.env.NODE_ENV === 'development'
? {
filename: '[name].css',
chunkFilename: '[name].[hash:9].css'
}
: true
}
}))
}
If using an older version of UnoCSS, you can use the following code: webpack 5webpack 4 ts// vue.config.js
const process = require('node:process')
const UnoCSS = require('@unocss/webpack').default
module.exports = {
configureWebpack: {
devtool: 'inline-source-map',
plugins: [
UnoCSS()
],
optimization: {
realContentHash: true
}
},
chainWebpack(config) {
config.module.rule('vue').uses.delete('cache-loader')
config.module.rule('tsx').uses.delete('cache-loader')
config.merge({
cache: false
})
},
css: {
extract: process.env.NODE_ENV === 'development'
? {
filename: 'css/[name].css',
chunkFilename: 'css/[name].css'
}
: true
},
}
ts// vue.config.js
const process = require('node:process')
const UnoCSS = require('@unocss/webpack').default
module.exports = {
configureWebpack: {
plugins: [
UnoCSS({}),
]
},
chainWebpack(config) {
config.module.rule('vue').uses.delete('cache-loader')
config.module.rule('tsx').uses.delete('cache-loader')
config.merge({
cache: false,
})
},
css: {
extract: process.env.NODE_ENV === 'development'
? {
filename: '[name].css',
chunkFilename: '[name].[hash:9].css',
}
: true,
},
}
|