Configuring styled-jsx with scss in Next.js

Next.js has sass support is built-in, but this doesn’t extend to the styling inside styled-jsx tags. The sass syntax is not working, and if you’re already using Babel instead of SWC, you’ll quickly encounter a:

Error: Nesting detected at $line:$column. Unfortunately nesting is not supported by styled-jsx

In this article I’ll describe how to setup Next.js with the @styled-jsx/plugin-sass and how to setup Visual Studio Code.

Configuring Next.js

Create a next app (skip this step if you already have a next app)

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

Install the @styled-jsx/plugin-sass and dart-sass dependencies:

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

Create a .babelrc.json file in the project folder with:

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

Restart the next server and reload the page.
scss now works inside <style jsx>tags. 🎉

( This setup disables SWC, as it doesn’t support preprocessor yet: #782 )

Setting up vscode

Visual Studio Code doesn’t come with styled-jsx support out-of-the-box so we’ll need to install the following extensions:

1. Install the styled-jsx Syntax Highlighting (Divlo) extension for syntax highlighting.
2. Install the styled-jsx Language Server (Divlo) extension for autocompletion, color-picker, etc.

Uninstall other styled-jsx extensions as these might conflict.