Using multiple Rule.use in webpack 5 for scss

Question

I am currently upgrading our project from webpack 4 to 5. Unfortunately, I'm encountering an error regarding in css loaders. Here is the error I encountered:

export 'customBtn' (imported as 'customBtn') was not found in './button.scss' (possible exports: appBtn)

Because in our project, there are different ways to import the scss file for example:

// button.scss

.custom-btn{
  background-color: red
  color: white;
}

// app.scss

.app-btn{
  background-color: green;
  color: black;
}

// index.js
import Header from '../../components/Header';
import Intro from '../../components/_Intro';
import { customBtn } from './app.scss';
import "./app.scss";

import { App } from './styles';

const Home = () => {
  return (
    <App>
      <Header />
      <Intro />
        <button className={customBtn}>Click here</button>
        <button className="app-btn">Click here</button>
    </App>
  )
};

export default Home;

Here is the webpack config rule for using the scss

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (production) => ({
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            // ====================================
            // if I uncomment this and comment the current option, 
            // only the "customBtn" class will work but the 
            // "app-btn" will not work
            // ====================================
            // options: {
            //  esModule: true,
            //  importLoaders: 2,
            //  modules: {
            //    namedExport: true,
            //  }
            // }
            options: {
               sourceMap: true,
               importLoaders: 1,
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            }
          }
        ],
      },
    ],
  },
});

And here is the package.json

{ 
  ...
  "dependencies": {
    "css-minimizer-webpack-plugin": "^3.4.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.2.0",
    "terser-webpack-plugin": "^5.3.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-styled-components": "^1.10.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.9.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^9.0.0",
    "postcss-loader": "^7.3.4",
    "sass-loader": "^13.3.3",
    "style-loader": "^3.3.3",
    "webpack": "^5.72.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.9.0",
    "webpack-merge": "^5.8.0"
  },
}

Is there a way to config the webpack to use different import from scss files or to use multiple Rule.use.