كيفية استخدام 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.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

module.exports = nextConfig

التنفيذ

يمكنك استخدام خاصية implementation لتحديد تنفيذ Sass الذي تريد استخدامه. افتراضيًا، يستخدم Next.js حزمة sass.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

متغيرات Sass

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

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

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// يوجه إلى مسار URL الجذر `/`

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

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