Problem

If you are anything like me, you like things arranged in a systematic manner.

I like to use this folder structure to keep my CSS/SCSS in its respective component, as it effectively establishes the separation of concern.

Achieving this in Next.js if you are using SASS, is bit of a hassle. While trying to do the same, you may encounter this error:

error - ./components/Navbar/navbar.styles.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).

Solution

I'm assuming that you have already installed SASS for your Next.js project.

If not, you can install it using the following:

yarn add @zeit/next-sass node-sass
Install next-sass and node-sass to your project

Next, you need to create a file named next.config.js with the following lines in it, to enable SASS.

const withSass = require("@zeit/next-sass");
module.exports = withSass();

// If you already have some config

module.exports = withSass({
  target: 'serverless',
  env: {
    JWT_SECRET: process.env.JWT_SECRET
  }
});
Add custom setting to enable component level SCSS

That's it! It's up and running, and everything looks neat and in place now.

Conclusion

If this solution worked for you, I will be providing answers to many Next.js related queries in the series, Next Station. So make sure you subscribe to receive the updates.

Do mention the queries in the comment section below and I hope to see you soon!