Webpack 插件

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

信息

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

安装

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 文件：

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

export default defineConfig({
  // ...UnoCSS选项
})

警告

如果你使用 webpack@4.x，则不支持 optimization.realContentHash 配置，并且你应该使用 css.extract.filename 来自定义 CSS 文件名（我们在示例中使用哈希码的前 9 个字母）。注意这个与捆绑相关的已知问题和 webpack#9520。

使用

在主入口中添加 uno.css：

// main.ts
import 'uno.css'