How to Import Partial Sass Files in Next.js CSS Modules?

In Next.js, you can import partial Sass files by specifying their absolute path (relative to the project directory) to the @import rule.

For example, let's suppose you have a project structure like the following:

src/
..└── app
....└── components
......└── Foo
........└── ...
........└── Foo.module.scss
..└── styles
....└── _helper.scss

To import the "_helper.scss" partial file in "Foo.module.scss" you can specify its path to the @import rule like so:

// Foo.module.scss
@import 'src/styles/helper';

// ...

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.