Nextjs
Published in

Nextjs

#Next.js

How to Add Sass/Scss Inside next.js

Learn Next.js Easy And Simple ways #SeriesPart3

Add Sass/Scss Inside next.js
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.

Whats Is Next.js?

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

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 sass Package and secondly Install 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

Next-plugins:
Next-plugin Builten Package Provide 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

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.
Config next.config.js
Past Code Inside next.config.js
  • Past Code Inside Your next.config.js File.
  • Inside sass option parameter handler our Scss File. So Create our Scss file in styles Folder Inside You Dir.
const path = require('path')const withSass = require('@zeit/next-sass');module.exports = withSass({/* bydefault config  option Read For More Optioshere 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 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.

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.

Conclusion:

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

If Read More Visited My Website:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/