▲Next.js

Sass Support

Updated 2026-04-20

4 min read

Introduction

Styling is a crucial aspect of web development, and using preprocessor languages like Sass can significantly enhance your workflow by providing features such as variables, nesting, mixins, and more. In this section, we'll explore how to integrate Sass into a Next.js project, enabling you to write cleaner and more maintainable CSS.

Prerequisites

Before diving into the implementation details, ensure that you have the following prerequisites:

Node.js installed on your machine.
A basic understanding of Next.js.
Familiarity with Sass syntax and features.

Setting Up Your Next.js Project

If you haven't already created a Next.js project, you can set one up using the Create Next App command:

npx create-next-app@latest my-nextjs-project
cd my-nextjs-project

Once your project is set up, you're ready to integrate Sass.

Installing Sass

To use Sass in your Next.js project, you need to install the sass package. This package provides a seamless integration between Next.js and Sass:

npm install sass

or if you are using Yarn:

yarn add sass

After installing the package, you can start using .scss or .sass files in your project.

Using Sass in Your Project

Next.js automatically supports Sass files out of the box after installing the sass package. You can import .scss or .sass files directly into your components just like you would with CSS files.

Example: Basic Usage

Let's create a simple example to demonstrate how to use Sass in a Next.js component.

Create a Sass file: Create a new file named styles.scss in the styles directory of your project:

// styles/styles.scss
$primary-color: #3498db;

.container {
  background-color: $primary-color;
  padding: 20px;
  text-align: center;
}

.title {
  color: white;
  font-size: 24px;
}

Import the Sass file in a component: Import the styles.scss file into your pages/index.js or any other component:

// pages/index.js
import Head from 'next/head';
import styles from '../styles/styles.scss';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js with Sass</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className={styles.title}>Welcome to Next.js with Sass!</h1>
      </main>
    </div>
  );
}

Run your project: Start your Next.js development server:

npm run dev

yarn dev

Navigate to http://localhost:3000 in your browser, and you should see the styled content using Sass.

Example: Nested Styles

Sass's nesting feature allows you to write more organized and readable CSS. Here's an example of how to use nested styles:

// styles/nested.scss
.container {
  background-color: #ecf0f1;
  padding: 20px;

  .title {
    color: #3498db;
    font-size: 24px;

    &:hover {
      text-decoration: underline;
    }
  }

  p {
    color: #2c3e50;
  }
}

Import and use this nested Sass file in a component:

// pages/nested.js
import Head from 'next/head';
import styles from '../styles/nested.scss';

export default function Nested() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js with Nested Sass</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className={styles.title}>Nested Styles Example</h1>
        <p>This is a paragraph styled with nested Sass.</p>
      </main>
    </div>
  );
}

Best Practices

1. Organize Your Styles

Keep your styles organized by creating separate files for different components or sections of your application. This makes it easier to manage and maintain your code.

2. Use Variables

Leverage Sass variables to define colors, fonts, spacing, etc., in a single place. This promotes consistency across your project and makes it easy to update styles globally.

// styles/variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica Neue', sans-serif;

Import this file in your other Sass files:

@import '../styles/variables';

.container {
  background-color: $primary-color;
  font-family: $font-stack;
}

3. Create Mixins

Mixins are reusable blocks of styles that can be included in multiple selectors. This is useful for creating responsive designs or applying common styles.

// styles/mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Use the mixin in your components:

@import '../styles/mixins';

.container {
  @include flex-center;
  height: 100vh;
}

4. Avoid Over-Nesting

While nesting is a powerful feature, over-nesting can lead to deeply nested selectors that are difficult to maintain and override. Aim for a balance between organization and readability.

5. Use Partials for Reusability

Sass partials (files starting with an underscore) allow you to split your styles into smaller, reusable modules. This is particularly useful for larger projects.

// styles/_reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Import the partial in your main Sass file:

@import 'reset';

Advanced Features

1. Importing CSS Files

You can also import regular CSS files into your Sass files if needed:

// styles/styles.scss
@import '../styles/external.css';

.container {
  background-color: #3498db;
}

2. Using Global Styles

To apply global styles that are not scoped to a specific component, you can create a _globals.scss file and import it in your pages/_app.js:

// styles/globals.scss
body {
  font-family: 'Arial', sans-serif;
}

Import the global styles in _app.js:

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

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

export default MyApp;

3. Configuring Sass Options

For more advanced configurations, you can customize the Sass compiler options by creating a next.config.mjs file:

// next.config.mjs
import { defineConfig } from 'next';

export default defineConfig({
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
});

Conclusion

Integrating Sass into your Next.js project is straightforward and can greatly enhance your styling capabilities. By leveraging features like variables, nesting, mixins, and partials, you can write cleaner, more maintainable CSS. This tutorial has covered the basics of setting up Sass in a Next.js project, as well as some best practices and advanced features to help you take full advantage of Sass's power.

Feel free to experiment with these techniques and adapt them to fit your specific project needs. Happy coding!