Next.js is a framework for building server-rendered React applications. It’s based on the idea of an incremental build, where you can use your browser to watch changes happen in real time.
The Next.js SCSS is a package that allows developers to use Sass or SCSS in their Next.js apps.
Developers are always on the lookout for the most cutting-edge technology to use when creating web apps. It’s simpler to create attractive user interfaces now that the React.js library is available. When it comes to production-ready web apps, Next.js, a React library framework, is fantastic. Instead of CSS, developers are enamored with Sass or SCSS. In this article, we’ll look at how to utilize Sass or SCSS in a Next.js project.
In this tutorial, we’re going to use the Sass SCSS syntax.
Prerequisites
To follow along with this tutorial, you’ll need a basic understanding of HTML, CSS, Sass, and Next.js.
What we will discover
We shall learn more about this topic here.
- What is the difference between Sass and Scss?
- Make a Next.js application.
- Set up the sass package.
- In our Next.js project, we’re using SCSS.
The app we’re going to create will look like this in the end.
What is the difference between Sass and Scss?
Sass (Syntactically amazing style sheets) is a scripting language for preprocessors. It translates or compiles the syntax into standard CSS.
It employs two different syntaxes.
- Indented syntax is the original syntax, and it utilizes a syntax close to Haml.
- SCSS (Sassy CSS) is a modern syntax that utilizes block formatting similar to CSS.
We’ll be working with the new syntax here (Sassy CSS).
This syntax will be converted to regular CSS by the sass pre preprocessing package we’re using.
It’s important not to mix up Sass with SCSS. Sass is a preprocessor, and SCSS is Sass’s more recent syntax.
Make a Next.js application
First, we’ll use the NPX tool to build a Next.js application. Don’t worry about NPX; it’s an utility that comes with NPM (Node Package Manager) 5.2 and above.
So, after successfully installing Node.js, use NPX to build a Next.js application.
next-scss-example npx create-next-app 
This command will generate a react application with the name next-scss-example as the project name.
Now launch the program by going to the project directory.
npm run dev next-scss-example
It will launch the Next application we built with the URL https://localhost:3000 in our browser window.
If you need more help with this step, check out my post on how to install and set up a Next.js app on Windows 10.
We may use Visual Studio Code or any other code editor to open the project.
Set up the Sass package.
Now we’ll use NPM to install the sass package. This interprets or compiles SCSS syntax into standard CSS.
Sass may be deployed locally or globally in our app. However, we’re going to include it in our app.
The command below will take care of that.
npm install I sass
In our Next.js project, we’re using SCSS.
We may use Next.js to apply styles such as,,,,,,,,,,,,,,,,,
- Stylesheet for the whole site
- Stylesheets at the component level
The pages/ app.js file imports global stylesheets that apply to the whole app.
Each component imports component-level styles. ComponentName.module.scss will be the naming structure.
Now let’s use Next.js to re-design the main page and add some SCSS styles to it.
As a first step, we may modify the index.js file in the pages directory, which will alter our app’s homepage UI.
We’re going to make three cards, each with a title and a description. We’ll also use the Home.module.scss stylesheet from the styles directory.
/ styles from ‘../styles/Home.module.scss’ are imported return (default function Home()) export (default function Home()) export (default function Home()) export (default function
Card 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Card 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Card 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
) }
As a result, the app will appear as shown below.
Let’s get started on the Home.module. Inside the styles directory, there is a scss file.
.card styles/Home.module.scss .card margin-left: 1rem; margin-right: 1rem; box-shadow: 5px 5px 20px rgb(0 0 0 / 10% ); padding: 1rem; width: 100 percent ; height: auto; title; margin-bottom: 1rem; font-size: 2em; font-size: 1em; description &:hover rgb(235, 235, 235); cursor: pointer; &:hover rgb(235, 235, 235); &:hover rgb(235, 235, 235); &:hover rgb(235, 235,
As a result, our app will be more elegant, as seen below.
Let’s finish off with some worldwide styles. This is specified in the styles directory’s global.scss file.
body margin-top: 40vh; / styles/global.scss
All of our app’s pages will have a margin if we use the aforementioned style. As a result, the cards will be centered vertically.
Codesandbox
To see the live app, go to the CodeSandbox link. You can also clone this project and modify the code in your CodeSandbox account.
GitHub
You may always clone this project, refer to the code, and work on top of it by going to the GitHub repository.
https://github.com/syamjayaraj/next-scss-example
Summary
To build the SCSS syntax, we built a basic Next.js project and installed the Sass library. Then we updated the UI of the Home page and added a SCSS file to design it. A global style has also been introduced that affects the whole app.
As an example:
As if Loading…
This may be interesting to you.
Sass or SCSS is a CSS preprocessor that allows you to write styles in a more organized and efficient way. It can be used with any framework, but the most popular use of it is in Next.js apps. Reference: next js css variables.
Frequently Asked Questions
Does Next JS support SCSS?
Next JS does not support SCSS.
How import next JavaScript to SCSS?
You can import a JavaScript file into SCSS by using the @import directive.
How do I use SCSS in my project?
SCSS is a special type of CSS that is used in Sass. Its a little bit more advanced than regular CSS, but it has some cool features that make it worth using.
Related Tags
- how to use scss in next js
- next js scss not working
- next js import scss in component
- global css cannot be imported from files other than your custom
- sass modules
