Sass

يدعم Next.js مدمجًا التكامل مع Sass بعد تثبيت الحزمة باستخدام كل من امتدادات .scss و .sass. يمكنك استخدام Sass على مستوى المكون عبر وحدات CSS وامتداد .module.scss أو .module.sass.

أولاً، قم بتثبيت sass:

npm install --save-dev sass

معلومة مفيدة:

يدعم Sass تركيبتين مختلفتين، لكل منهما امتداده الخاص. يتطلب امتداد .scss استخدام تركيبة SCSS، بينما يتطلب امتداد .sass استخدام التركيبة ذات المسافات البادئة ("Sass").

إذا لم تكن متأكدًا مما تختار، ابدأ بامتداد .scss الذي هو مجموعة شاملة لـ CSS، ولا يتطلب منك تعلم التركيبة ذات المسافات البادئة ("Sass").

تخصيص خيارات Sass

إذا كنت ترغب في تكوين مترجم Sass، استخدم sassOptions في next.config.js.

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

متغيرات Sass

يدعم Next.js متغيرات Sass المصدرة من ملفات وحدة CSS.

على سبيل المثال، باستخدام متغير Sass المصدر primaryColor:

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// يشير إلى مسار الجذر `/`

import variables from './variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>مرحبًا، Next.js!</h1>
}