В Next.js есть встроенная поддержка sass, но это не распространяется на стили внутри тегов styled-jsx. Вы быстро столкнетесь с:

Ошибка: обнаружено вложение в $ line: $ column. К сожалению, вложение не поддерживается в styled-jsx.

В этой статье я расскажу, как настроить Next.js с помощью @ styled-jsx / plugin-sass и как настроить Visual Studio Code.

Настройка Next.js

Создайте следующее приложение (пропустите этот шаг, если у вас уже есть следующее приложение)

npm init next-app # or  yarn create next-app

Установите зависимости @ styled-jsx / plugin-sass и dart- sass:

npm install --save-dev @styled-jsx/plugin-sass sass

Создайте .babelrc.json файл в папке проекта с:

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["@styled-jsx/plugin-sass"]
        }
      }
    ]
  ]
}

Перезагрузите следующий сервер и перезагрузите страницу.
scss теперь работает внутри <style jsx>tags. 🎉

Настройка vscode

Visual Studio Code не имеет стандартной поддержки styled-jsx, поэтому нам необходимо установить следующие расширения:

  1. Установите расширение styled-jsx Syntax Highlighting (Divlo) для выделения синтаксиса.
  2. Установите расширение styled-jsx Language Server (Divlo) для автозаполнения, выбора цвета и т. Д.

Удалите другие расширения styled-jsx, так как они могут конфликтовать.