Sass

Next.js, hem .scss hem de .sass uzantıları kullanılarak paket yüklendikten sonra Sass ile entegre olmak için yerleşik desteğe sahiptir. CSS Modülleri ve .module.scssveya .module.sass uzantısı aracılığıyla bileşen düzeyinde Sass kullanabilirsiniz.

İlk olarak, yükleyin sass:

npm install --save-dev sass

Bildiğim iyi oldu:

Sass, her biri kendi uzantısına sahip iki farklı sözdizimini destekler. .scss uzantısı SCSS sözdizimini kullanmanızı gerektirirken, .sass uzantısı Girintili Sözdizimini ("Sass") kullanmanızı gerektirir.

Hangisini seçeceğinizden emin değilseniz, CSS'nin bir üst kümesi olan ve Girintili Sözdizimini ("Sass") öğrenmenizi gerektirmeyen .scss uzantısı ile başlayın.

Customizing Sass Options

Sass derleyicisini yapılandırmak istiyorsanız, next.config.js adresinde sassOptions kullanın.

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

Sass Variables

Next.js, CSS Modülü dosyalarından dışa aktarılan Sass değişkenlerini destekler.

Örneğin, dışa aktarılan primaryColor Sass değişkenini kullanarak:

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

// maps to root `/` URL
 
import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}