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'