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 '../styles/variables.module.scss'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout color={variables.primaryColor}>
      <Component {...pageProps} />
    </Layout>
  )
}