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

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

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