Enhancing Performance with Sass's @forward Rule in Next.js

Discuss how to use Sass's @forward rule to enable partials to forward styles and mixins to other stylesheets, improving organization and performance in a Next.js application.

// styles/_variables.scss
$primary-color: #333;
$font-stack: Helvetica, sans-serif;

This is a partial file named _variables.scss that contains Sass variables to be reused across the application. The underscore indicates it's a partial.

// styles/_mixins.scss
@forward 'variables';

@mixin font-stack { font-family: $font-stack; }
@mixin primary-color { color: $primary-color; }

In _mixins.scss, we use the @forward rule to make variables from _variables.scss available. We then define some mixins that use these variables.

// styles/main.scss
@forward 'mixins';

body { @include font-stack; background-color: $primary-color; }

In main.scss, we forward styles from _mixins.scss using @forward, giving us access to mixins that we then apply to the body selector along with a variable.

// pages/index.jsx
import '../styles/main.scss';

export default function Home() {
  return <div>Welcome to my Next.js app!</div>;
}

In the index.jsx page component of our Next.js app, we import main.scss to apply the styles defined there. This showcases how to use Sass files in Next.js components.