Using Styled-Jsx with SASS in NextJs

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": [
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]

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


There are no comments, make the firs comment