UnoCSS Next.js एकीकरण

// TODO: उदाहरणों के लिंक

UnoCSS और Next.js के साथ आरंभ करें।

सेटअप

इंस्टॉलेशन

pnpm

pnpm add -D unocss @unocss/webpack

yarn

yarn add -D unocss @unocss/webpack

npm

npm install -D unocss @unocss/webpack

bun

bun add -D unocss @unocss/webpack

कॉन्फ़िगरेशन

अपने प्रोजेक्ट के रूट में uno.config.ts बनाएं।

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetWebFonts,
  presetWind3
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    // ...
  ],
})

प्लगइन जोड़ें

फिर अपने next.config.js के माध्यम से UnoCSS को webpack में एक प्लगइन के रूप में जोड़ें।

// next.config.js
const UnoCSS = require('@unocss/webpack').default

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(
      UnoCSS(),
    )
    return config
  },
}

module.exports = nextConfig

स्टाइलशीट आयात करें

फिर _app.tsx में uno.css आयात करें।

import type { AppProps } from 'next/app'
// _app.tsx
import '@unocss/reset/tailwind.css'

import 'uno.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

उपयोग

unocss के साथ अपने कंपोनेंट्स को स्टाइल करें!

/* index.tsx */
const Home: NextPage = () => {
  return (
    <>
      <main className="py-20 px-12 text-center flex flex-col items-center gap-20px">
        <span text="blue 5xl hover:red" cursor="default">Nextjs</span>
        <div className="i-carbon-car inline-block" text="4xl" />
        <button className="btn w-10rem">Button</button>
      </main>
    </>
  )
}

हॉट मॉड्यूल रीलोड

HMR को समर्थन करने के लिए आपको webpack के कैशिंग से बाहर निकलना होगा।

// next.config.js
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
+   config.cache = false
    config.plugins.push(UnoCSS())
    return config
  }
}

समस्या निवारण

वर्चुअल मॉड्यूल से संबंधित त्रुटि

Error: ENOENT: no such file or directory, open '.../_virtual_/__uno.css'

.next डायरेक्टरी को हटाकर देखें और डेव सर्वर को पुनः आरंभ करें।

अन्य

अपने प्रोजेक्ट को बिल्ड करने के लिए आपको अपने tsconfig.json में अपने लक्ष्य को कम से कम es2015 तक बढ़ाना पड़ सकता है।

.js एक्सटेंशन वाली फ़ाइलें डिफ़ॉल्ट रूप से समर्थित नहीं हैं। अपनी फ़ाइल एक्सटेंशन को .jsx में बदलें या include: /\.js$/ के साथ अपने कॉन्फ़िग में js फ़ाइलों को शामिल करने का प्रयास करें। अधिक जानें।