Using Sass in Next.js
Next.js supports Sass through the sass package. After installing it, you can import SCSS stylesheets using the conventions supported by your Next.js router and version.
With the Pages Router, global stylesheets are typically imported through pages/_app.js or pages/_app.tsx. Component-specific Sass Modules use filenames such as Button.module.scss.
With the App Router, global styles can be imported from the root layout or appropriate application entry points, while component modules can be imported by components that use them. Server and Client Component boundaries still apply to JavaScript behavior, but ordinary stylesheet imports are handled by the framework's build pipeline.
Do not assume that every CSS feature, import location, or build customization behaves identically across Next.js versions. Follow the documentation for the router and version used by the project.
- Package:
sass - Pages Router global styles:
Typically pages/_app.js or pages/_app.tsx - App Router global styles:
Typically the root layout or an appropriate application entry point - Component isolation:
*.module.scss
npm install sass.scss and .module.scss files through its build pipeline.
For a Pages Router project, global SCSS can be imported from pages/_app.js. For component isolation, use .module.scss files. No separate Sass watcher is normally required when Next.js is already managing the development build.Which filename convention is used for a component-specific Sass Module in Next.js?