Open In App

How to import SAAS in Next.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Sass reduces the repetition of CSS and therefore saves time. Next.js is based on react, webpack, and babel. It is an awesome tool for creating web applications and is famous for server-side rendering.

In this article, we will discuss the way to import the SaaS in the Next.js Application. Below is the step-by-step implementation.

Step 1: Create the Next.js application using the following command:

npx create-next-app project_test
  • project_test: Our Next.js Application Name.

Project Structure: The following packages and dependencies will be installed automatically.

Next.js Application Directory Structure.

Step to run the application: To run the Next.js Application use the following command:

npm run dev

Now our task is to import the SaaS inside our Application. Use the following steps to import SaaS inside our application.

Step 1: Install the SaaS Package inside the Application using the following command:

npm i sass
npm add sass 

As you can see inside the styles directory Home.module.css file is there. We will use this file only and import SaaS.

Step 2: Add global sass styles:

  • Go to the ‘styles’ directory and select the ‘globals.css’ file and change the extension to either ‘.sass’ or ‘.scss’.
globals.scss
  • Update the following line inside the pages->app.js file:
import styles from '../styles/globals.scss'

Step 3: Now we will test our saas installation. To do this update your index.js file with the following code.

index.js

Javascript




export default function Home() {
    return (
        <>
            <h1 class="title">GeeksforGeeks</h1>
            <h3>Import SaaS in Next.js</h3>
        </>
    )
}


Step 4: We will target <h1> element for changing the text color using the sass styling. our globals.scss file will look like this.

globals.scss:

CSS




$text_color: green;
.title{
    color: $text_color;
}


Output:

 



Last Updated : 05 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads