В 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, поэтому нам необходимо установить следующие расширения:
- Установите расширение styled-jsx Syntax Highlighting (Divlo) для выделения синтаксиса.
- Установите расширение styled-jsx Language Server (Divlo) для автозаполнения, выбора цвета и т. Д.
Удалите другие расширения styled-jsx, так как они могут конфликтовать.