I’m currently working on a frontend application using Next.js and would like to utilize global SCSS files instead of the default module.scss approach to avoid class name collisions. Everything works fine in development, but when I push to production, a lot of my CSS styling breaks.

From what I understand, Next.js compiles all CSS into a single file during the build process, which might be causing some issues with rule precedence.

My question: How can I configure Next.js to respect my SCSS rules and ensure that certain SCSS styles are applied only to specific subclasses (without resorting to CSS modules)?

I found this snippet in the Next.js documentation that suggests adding the following to next.config.js:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

However, when I try this, I get the following error:

referenceerror: require is not defined in ES module scope, you can use import instead

Has anyone encountered this issue before, or do you have any advice on how to resolve it?

Note: I’m close to finishing the project, so switching back to CSS modules isn’t an option.

Thanks in advance for your help!

PS: I am also currently using tailwind, I do not know if that may be an issue