Webpack 插件

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

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

INFO

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

安装

pnpmyarnnpm

bash

pnpm add -D @unocss/webpack

pnpm add -D @unocss/webpack

bash

yarn add -D @unocss/webpack

yarn add -D @unocss/webpack

bash

npm install -D @unocss/webpack

npm install -D @unocss/webpack

webpack 5webpack 4

// 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
  }
}

// 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'
    }
  }
}

创建一个 uno.config.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

如果您使用的是webpack@4.x，optimization.realContentHash 配置不受支持，并且您应该使用 css.extract.filename 自定义 CSS 文件名（我们使用前 9 个哈希码字母作为示例）。请注意此捆绑包和webpack#9520的已知问题。

使用

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

// main.ts
import 'uno.css'

// main.ts
import 'uno.css'

Webpack 插件 ​

安装 ​

使用 ​

Webpack 插件

安装

使用