Nextjs custom config setup with scss

Next Js is a very powerful react framework that lets you render React on the server side. Next Js comes with a lot of default configurations. Next Js also support sass files by default.

Just you need to install sass module

npm install sass

But, sometimes there might be a requirement that you need to do custom configuration for nextJs.

then you need to create next.config.js which actually overrides the default configuration of nextJs.

So, then we need to add some modules to enable sass file support. Like I have come across withStyles module In which we can add configuration for sass or less, CSS modules, etc.

for eg.

const withStyles = require('@webdeb/next-styles');
module.exports = withStyles({
    sass: true, // use .scss files
    modules: true, 
    webpack:(config)=>{
     return config;
    }
      
  })