logo studio roma
EN / ES

Back to Blog

SCSS and Next.js

Pablo Romera foto

Pablo Romera 

/

 June 22, 2023 / 3 min read

Pablo Romera foto

In this comprehensive guide, you will learn how to fully leverage the benefits of SCSS (Sass) in your Next.js project. We'll delve into the script configuration in the package.json file, and how to import SCSS styles into your components. Armed with this knowledge, you'll be able to maintain impeccable organization in your styles and optimize your website's performance.

Before we begin, to maintain an organized structure in your Next.js project, we will create a "styles" folder in the project's root directory. Within this folder, we'll create another subfolder:

  1. "scss": This is where we'll place our SCSS files to write our styles in a modular fashion, including global.scss

The folder structure will look as follows:

- project folder
	- styles
		- scss
	- other folders

Script Configuration in package.json

To enable SCSS compilation and observe changes during development, we'll update the scripts in the package.json file. The new configuration is as follows:

"scripts": {
	"dev":"next dev && sass --watch --update --style=expanded styles/scss:styles/css",
	"build":"npm run build:scss && next build",
	"start":"next start",
	"lint":"next lint",
	"build:scss": "sass styles/scss -o styles/css"
}

Explanation of the new scripts:

  • The "dev" script will run Next.js in development mode, thanks to next dev. The second command we can see is used during development to observe and automatically compile SCSS files as changes are made to them. The command runs continuously, monitoring SCSS files for modifications. When a change in an SCSS file is detected, the Sass command automatically compiles it and generates the corresponding CSS file as per the set configuration, eliminating the need to manually execute the compilation command each time a change is made.
  • The "build" script will take care of building the application for the production environment. Before construction, it will execute the "build:scss" script to compile SCSS styles into CSS.
  • The "build:scss" script will compile SCSS files into CSS using Sass.

Production

This will work in the development environment, but when it comes to moving to production, changes will need to be made. Vercel and Next.js have built-in support for sass, so deploying your application on Vercel should pose no issues.

In the case of using Vercel, your scripts in package.json would look like this:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

Using Styles in a Component

In a Next.js project, there's no need to explicitly convert your .scss files to .css. When you import an .scss file into a component, Next.js will automatically handle compiling and applying these styles when building your application. Thus, your project may have a structure like this:

└── styles
    ├── scss
    │   ├── _variables.scss
    │   └── main.scss
    └── css
        └── (no .css files are generated here, Next.js handles the compilation internally)
import "../styles/scss/main.scss";

// The rest of your code...

Conclusion

Using SCSS with Next.js is straightforward and enhances the organization and maintainability of your styles. With an orderly folder structure and proper script configuration in the package.json file, you can compile your SCSS styles into CSS and seamlessly apply them to your Next.js components. Take full advantage of SCSS in your Next.js project and create more efficient, reusable styles.

Remember to adjust the folder structure and file names according to your specific preferences and needs.