Webpack 插件

¥Webpack Plugin

UnoCSS 的 webpack 插件：@unocss/webpack。目前，该插件仅支持 global 模式。

¥The webpack plugin for UnoCSS: @unocss/webpack. Currently, this plugin only supports the global mode.

信息

该插件不附带任何默认预设。

¥This plugin does not come with any default presets.

安装

¥Installation

pnpm

pnpm add -D @unocss/webpack

yarn

yarn add -D @unocss/webpack

npm

npm install -D @unocss/webpack

webpack 5

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

module.exports = {
  plugins: [
    UnoCSS(),
  ],
  optimization: {
    realContentHash: true,
  },
}

webpack 4

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

module.exports = {
  plugins: [
    UnoCSS(),
  ],
  css: {
    extract: {
      filename: '[name].[hash:9].css',
    },
  },
}

创建 uno.config.ts 文件：

¥Create a uno.config.ts file:

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

警告

如果你使用的是 webpack@4.x，则不支持 optimization.realContentHash 配置，并且你应该使用 css.extract.filename 来自定义 CSS 文件名（我们使用 hashcode 的前 9 个字母而不是 contenthash 作为示例）。小心这个带有打包包的 已知问题 和 网络包#9520。

¥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

将 uno.css 添加到你的主入口中：

¥Add uno.css to your main entry:

// main.ts
import 'uno.css'