CSS and SCSS with NextJS (issue while using multiple loaders: next-sass, next-css)

Question

I am trying to convert a CRA to Next.js. Currently I am facing an issue with styles. As per current structure we have modules based SCSS files.

So what I need is:

• Import modules based SCSS files as per modules / components.
• Import normal CSS files which are part of 3rd party npm packages, for example: react-select, react-infinite-calendar, react-multi-carousel.

I have tried a lot of configurations inside next.config.js but that didn't help me.

Here are the package versions I am using:

next: "^9.5.3",
react: "^16.13.1",
@zeit/next-css: "^1.0.1",
@zeit/next-sass: "^1.0.1",
node-sass: "^4.14.1" / sass: "^1.29.0"

PS: I've tried node-sass & sass separately and together but that didn't help as well.

next.config.js

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
module.exports = withSass(
  withCSS({
    cssModules: true,  
    cssLoaderOptions: {
      url: false,
    },
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    },
  })
);

Notes:

• If cssModules is set to true, modules based SCSS works but lib imports doesn't. if it is set to false modules based SCSS does NOT work but lib imports works.
• Also tried changing order withSass(withCSS({})) to withCSS(withSass({})) that didn't help
• Also tried adding style-loader, css-loader, sass-loader inside webpack configs that didn't work too.

Is there a way I can get the both working using some configurations?