Using Styled-Jsx with SASS in NextJs

Comments (0)

Views (1118)

If you want to use SASS in styled-jsx tags in your nextjs projects, follow the steps below.

First create a nextjs project if it doesn't exist.

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

Then install the styled-jsx-plugin-sass and node-sass packages.

npm install --save-dev styled-jsx-plugin-sass node-sass

Create a file named .babelrc in the project directory you are working in and type and save the following

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

Restart the next server. You can now start using your sass codes in <style jsx>.

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !