Setting Up Global Styles with Sass in Next.js 14

Demonstrate how to set up global styles using Sass in a Next.js 14 project, including the creation of a global stylesheet and its import into the custom _app.js component.

// 1. Install Sass by running this command in your Next.js project:
// npm install sass

Install Sass in your Next.js project to enable Sass support.

/* Example content for styles/globals.scss */
// 2. Create a Sass file with global styles, e.g., `styles/globals.scss`

html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Create a global Sass stylesheet.

// 3. Import the global stylesheet in your custom _app.js
import '../styles/globals.scss';

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

Import the global Sass stylesheet in your custom _app.js to apply the styles globally.