Webpack प्लगइन

UnoCSS के लिए webpack प्लगइन: @unocss/webpack। वर्तमान में, यह प्लगइन केवल global मोड को समर्थित करता है।

INFO

यह प्लगइन किसी भी डिफ़ॉल्ट प्रीसेट के साथ नहीं आता है।

पूर्वापेक्षा

@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 में ले जाया गया है, आपको अपने कॉन्फ़िग को डायनेमिक आयात के माध्यम से लोड करने की आवश्यकता है:

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 विकल्प
})

WARNING

यदि आप webpack@4.x का उपयोग कर रहे हैं, तो optimization.realContentHash कॉन्फ़िगरेशन समर्थित नहीं है, और आपको CSS फ़ाइलनाम को कस्टमाइज़ करने के लिए css.extract.filename का उपयोग करना चाहिए (हम उदाहरण के रूप में contenthash के बजाय hashcode के पहले 9 अक्षरों का उपयोग करते हैं)। बंडल और webpack#9520 के साथ इस ज्ञात समस्या से सावधान रहें।

उपयोग

अपने मुख्य एंट्री में uno.css जोड़ें:

import 'uno.css'

फ्रेमवर्क

Vue + Vue CLI

यदि आप UnoCSS v0.59.0 के साथ webpack 4/5 के साथ Vue CLI का उपयोग कर रहे हैं, तो आपको अपने कॉन्फ़िग को डायनेमिक आयात के साथ लोड करने के लिए नवीनतम Vue CLI सेवा 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,
  },
}