Webpack Plugin

UnoCSS용 webpack 플러그인: @unocss/webpack. 현재 이 플러그인은 global 모드만 지원합니다.

INFO

이 플러그인에는 기본 preset이 없습니다.

사전 요구사항

@unocss/webpack은 CSS 파일을 처리하기 위해 style-loader와 css-loader가 필요합니다.

설치

pnpm

pnpm add -D @unocss/webpack

yarn

yarn add -D @unocss/webpack

npm

npm install -D @unocss/webpack

bun

bun add -D @unocss/webpack

UnoCSS 버전 v0.59.0부터 UnoCSS는 ESM 전용으로 이동했으며, 동적 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의 이전 버전을 사용하는 경우 다음 코드를 사용할 수 있습니다:

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 파일을 생성하세요:

import { defineConfig } from 'unocss'

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

WARNING

webpack@4.x를 사용하는 경우 optimization.realContentHash 설정이 지원되지 않으며, CSS 파일명을 사용자 정의하기 위해 css.extract.filename을 사용해야 합니다 (예제에서는 contenthash 대신 해시코드의 첫 9글자를 사용). 번들과 관련된 알려진 이슈와 webpack#9520에 주의하세요.

사용법

메인 엔트리에 uno.css를 추가하세요:

import 'uno.css'

프레임워크

Vue + Vue CLI

UnoCSS v0.59.0과 함께 webpack 4/5를 사용하여 Vue CLI를 사용하는 경우, 동적 import로 설정을 로드하기 위해 최신 Vue CLI Service v5.0.8을 사용해야 합니다:

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의 이전 버전을 사용하는 경우 다음 코드를 사용할 수 있습니다:

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