Sling Academy
Home/Next.js/How to use SASS in Next.js

How to use SASS in Next.js

Last updated: January 09, 2023

SASS (Syntactically Awesome Style sheets) can make your life much easier when writing CSS code with variables, nesting, mixins, and other amazing features. This succinct article shows you how to use SASS in Next.js.

The Steps

1. Install the sass package:

npm i sass -D

2. Add new files with the .scss extension to the styles folder (or rename existing .css files to .scss), like this:

3. Last but not least, update the places where you previously imported css files to scss:

// pages/_app.js
import "../styles/globals.scss";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
export default MyApp;

Example

In this example, we’ll use the nesting feature provided by SASS with BEM naming for classes.

Note: BEM stands for Block, Element, and Modifier. It’s a naming convention whose goal is to facilitate modularity and make styles and classes a lot easier to maintain.

Screenshot:

Here’s the code for pages/index.js:

// pages/index.js
import styles from  "../styles/Home.module.scss";

export default function Home() {
  return (
    <div className={styles.home}>
      <div className={styles.home__header}>
        <h1>KindaCode.com</h1>
      </div>
      <div className={styles.home__main}>
        <p>
          He thrusts his fists against the posts and still insists he sees the
          ghosts.
        </p>
      </div>
    </div>
  );
}

And here is the code in styles/Home.module.scss:

.home {
  padding: 30px;

  &__header {
    h1 {
      color: blue;
    }
  }

  &__main {
    padding: 30px;
    background: rgb(240, 240, 200);
    p {
      color: red;
    }
  }
}

That’s it. Leave a comment if you have any questions related to this topic. Happy coding!

Next Article: How to use Font Awesome with Next.js

Previous Article: How to Use Styled JSX in Next.js: Tutorial & Examples

Series: Working with CSS in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported