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">neveropen</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:
