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

Hello!

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;
    },
  })
);

NOTE:

If cssModules is set to true, modules based SCSS works but lib imports doesn't. if it is set to false modules based SCSS doess 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? If you need further details for this issue just mention me and I will be sharing the required details ASAP. I am running on a hard deadline or any kind of help will be much appreciated!

Thanks in advance!

@timneutkens

vercel / next-plugins

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