【Next.js】How to apply .scss to Next.js project

Version of Next.js....13.1.1

I made an app with React.js before and remade it with Next.js. I reused the .scss files that were used for my React.js project. This is how to apply a set of .scss files to Next.js project.

1.Install scss into your project directory.

npm install sass --save-dev

2.Make "scss" directory in "styles" directory and place .scss files in it.

Make sure make the root .scss file that imports the rest of .scss files. (In my project, I named "index.scss.")

3.In _app.tsx file, import the root .scss file.

Then, your .scss files are applied.

import '../styles/scss/index.scss';

Where to place images that are used for .scss files

Place the image files in "public" directory. In your .scss files, you can write a path to the image files with a relative path.

// styles/scss/index.scss
background-image:url("./../../public/img/earth.jpg");