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).
I'm assuming that you have already installed SASS for your Next.js project.
If not, you can install it using the following:
Next, you need to create a file named
next.config.js with the following lines in it, to enable SASS.
That's it! It's up and running, and everything looks neat and in place now.
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!