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 Module.

Например, используя экспортированную primaryColor переменную Sass:

$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>
}