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(),
    // ...
  ],
})

إضافة المكون الإضافي

ثم أضف UnoCSS كمكون إضافي إلى webpack عبر next.config.js الخاص بك.

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

استيراد أوراق الأنماط

ثم استورد uno.css في _app.tsx.

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 وإعادة تشغيل خادم التطوير.

أخرى

قد تحتاج إلى رفع هدفك إلى es2015 على الأقل في tsconfig.json لبناء مشروعك.

الملفات بامتداد .js غير مدعومة افتراضياً. غيّر امتدادات ملفاتك إلى .jsx أو حاول تضمين ملفات js في التكوين الخاص بك مع include: /\.js$/. تعرف على المزيد.