Sass

Next.js имеет встроенную поддержку Sass с использованием расширений .scss и .sass. Вы можете использовать Sass на уровне компонентов через CSS Modules с расширениями .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 Modules.

Например, использование экспортированной переменной 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>
}