Использование Sass в Next.js

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.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

module.exports = nextConfig

Реализация

Вы можете использовать свойство implementation для указания реализации Sass. По умолчанию Next.js использует пакет sass.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

Переменные Sass

Next.js поддерживает переменные Sass, экспортированные из файлов CSS Module.

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