Name is getting mangled by Webpack 5 while mini-css-extract-plugin loader

Question

Trying to export scss file with bootstrap 5.2 to a css file and linking that file to a index.php file but class names i guess are getting mangled somehow so I can't use bootstrap class like for a button btn btn-primary, as the generated classes names are like GcpZ2uTclIsK3IUwa3qT XWJXtmqteXQMN_oydssO

I have tried many webpack config but unable to find a solution. My current configs are shared below. how can I use bootstrap exported scss in webpack build ?

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/js/main.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new MiniCssExtractPlugin({
      linkType: "text/css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: () => [require("autoprefixer")],
              },
            },
          },
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
};

styles.scss

@import "~bootstrap/scss/bootstrap";

main.js

import "../scss/styles.scss";
import * as bootstrap from 'bootstrap'
import {addNumber} from './sum'
import {divideNumbers} from './division'
import {buttonClickAction} from './events'

Answer 1

I'm so new to webpack so I didn't exactly know what was I doing wrong. The problem was in webpack config file css-loader as bootstrap works with global css selector not module based i had to remove

{
 options: {
  modules: true,
 },
},