#Next.js

How to Add Sass/Scss Inside next.js

Learn Next.js Easy And Simple ways #SeriesPart3

Add Sass Inside next.js

Hey, My Name is Rajdeep Singh. In this Next.js Series Part 3, We Learn How to Add sass/scss in the next.js App and Build a Simple Scss Project in Next.js.

Next.js framework does not provide Direct Support In Sass. But Add Some Exter Node.js Package and Next.js Plugins To Extend CSS Ability.

What Is Next.js?

Make Sure You Read the First Basic Introduction About Next.js. Which Cover With Two Article #SeriesStart

What is next.js?

How To Add CSS In Next.js?

Let's start it

Steps:

1. Install NPM Package In Your Project
2. Config File
3. Create File Sass File
4. Import File.

Install NPM Package In Your Project:

Firstly Install Two NPM Package Inside Your Project. Use npm Or Yarn Command. Firstly Install the sass Package, and secondly, Install the next-plugins Builten Package.

Sass:
Sass and node-sass Package Work Both Same Inside Your Next.js. Select One Package With You Like to Install It.

In My Case, I Selected the sass package and installed it.

Use Npm Install Sass Package

npm i sass
or
npm i node-sass

Use Yarn Install Sass Package

yarn add sass
or 
yarn add node-sass

Read More About Sass

sass

Next-plugins:
Next-plugin Builten Package Provided By Next.js Team. Next-plugin Add Sass Functionally Inside Our App with simple configuration is also required.

Use Npm Install It:

npm install @zeit/next-sass

Use Yarn Install It:

yarn add @zeit/next-sass

vercel/next-plugins

Config File:

After Install NPM Package, Then Config Your Sass Package Inside Next.js

Create File

• If Next.js does Not Create next.config.js . Then Create next.config.js Inside Your Project Dir.

Past Code Inside next.config.js

• Past Code Inside Your next.config.js File.
• Inside the sass option parameter handler, our Scss File. So Create our Scss file in the styles Folder Inside Your Dir.

const path = require('path')
const withSass = require('@zeit/next-sass');
module.exports = withSass({
/* bydefault config  option Read For More Optios
here https://github.com/vercel/next-plugins/tree/master/packages/next-sass
*/
cssModules: true
})
module.exports = {
/* Add Your Scss File Folder Path Here */
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}

Create File Sass File:

Create file Inside style Folder

• Create Scss/Sass File Inside Your Style Folder and Write Scss/Sass Code inside the file.

Import File:

Import

• Import .sass or .scss files in your Next.js project and use it. I select the .scss file For My Project. If also use .sass file inside project.

If You, Interested in using Global Sass Alongside Your Project, Read It.

The Simple Way to Use Global Sass In side Next.js

Demo :

Check My Small Project And Download Code

All The Source Code is available on codesandbox.io. If You Interested in Play With It. Go it.

References:

Sass Basics

vercel/next-plugins

vercel/next-plugins

Conclusion:

Now you are ready to use sass or scss in your Next.js project. If you have any problem, query, or suggestion, tell me to comment below.