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.

先决条件

¥Prerequisite

@unocss/webpack 需要 style-loader 和 css-loader 来处理 CSS 文件。

¥@unocss/webpack requires style-loader and css-loader to handle CSS files.

安装

¥Installation

pnpm

pnpm add -D @unocss/webpack

yarn

yarn add -D @unocss/webpack

npm

npm install -D @unocss/webpack

从 UnoCSS 版本 v0.59.0 开始，UnoCSS 已移至仅 ESM，你需要通过动态导入加载配置：

¥From UnoCSS version v0.59.0, UnoCSS has been moved to ESM-only, you need to load your configuration via dynamic import:

webpack 5

// webpack.config.js
module.exports = function () {
  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
    plugins: [
      UnoCSS()
    ],
    optimization: {
      realContentHash: true
    }
  }))
}

webpack 4

// webpack.config.js
module.exports = function () {
  return import('@unocss/webpack').then(({ default: UnoCSS }) => ({
    plugins: [
      UnoCSS()
    ],
    css: {
      extract: {
        filename: '[name].[hash:9].css'
      },
    },
  }))
}

如果你使用的是旧版本的 UnoCSS，你可以使用以下代码：

¥If you're using older version of UnoCSS, you can use the following code:

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'

构架

¥Frameworks

Vue + Vue CLI

如果你将 Vue CLI 与 webpack 4/5 和 UnoCSS v0.59.0 结合使用，则需要使用最新的 Vue CLI 服务 v5.0.8 通过动态导入来加载配置：

¥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 5

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

webpack 4

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

如果使用旧版本的 UnoCSS，可以使用以下代码：

¥If using an older version of UnoCSS, you can use the following code:

webpack 5

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

webpack 4

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