base-button.module.css قبل از page.module.css مرتب میشود، زیرا کامپوننت <BaseButton> قبل از page.module.css ایمپورت شده است:// page.tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'
export default function Page() {
return <BaseButton className={styles.primary} />
}// base-button.tsx
import styles from './base-button.module.css'
export function BaseButton() {
return <button className={styles.primary} />
}┌─────────────────────────┐
│ فرآیند بهینهسازی CSS │
└─────────────────────────┘
📦 ورودی (چندین فایل CSS):
• base-button.module.css
• page.module.css
• layout.module.css
│
▼
╔══════════════════════╗
║ Next.js Build ║
║ ║
║ 1. Chunking ║
║ 2. Merging ║
║ 3. Minification ║
╚══════════╦═══════════╝
│
▼
📄 خروجی (یک فایل بهینه):
┌────────────────────┐
│ optimized.css │
│ • فشرده شده │
│ • فقط CSS مورد نیاز هر route │
│ • بدون کدهای اضافی │
└────────────────────┘
نکته کلیدی: ترتیب ایمپورت CSS در کد شما، ترتیب نهایی اعمال استایلها را تعیین میکند. استایلهایی که دیرتر ایمپورت میشوند، اولویت بالاتری دارند.
<name>.module.css به جای <name>.tsx).sort-imports در ESLint) غیرفعال کنید.
تنظیمات پیشرفته: شما میتوانید از گزینهcssChunkingدر فایلnext.config.jsبرای کنترل نحوه تکهتکه شدن (Chunking) فایلهای CSS استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app