I have this issue encountered on Webpack 5 in generating source maps. To briefly explain it, the source map is pointing in an incorrect file when being checked on the browser. I also noticed upon several test that the style is being placed to the succeeding file of the original or correct SCSS file.

So, for example, I have place a CSS on header.scss file and this file is followed by nav.scss base on it's location structure. When it is being build, the CSS that I have just placed on header.scss appears to be on nav.scss file when being checked on the browser which doesn't make sense because if you click on the nav.scss, you surely won't find the CSS since it was place on the header.scss.

For further illustration of the issue, I have attached some screenshot of it.

Original file where my CSS are being inputted:

When checking on the browser

By the way, I am using google chrome here, and here are some my code in my webpack.config.js

 let config = {
  mode: devMode ? 'development' : 'production',
  devtool: isDevMode ? 'source-map' : false,
  stats: 'minimal',
  entry: {
    global: path.resolve(__dirname, './assets/js/index.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
          {
            loader: "sass-resources-loader",
            options: {
                resources: [
                  "node_modules/bootstrap/scss/_functions.scss",
                  "node_modules/bootstrap/scss/_variables.scss",
                  "node_modules/bootstrap/scss/_mixins.scss"
                ],
            },
          },
        ]
      }
    ]
  },

Please note that I am not placing all the code on my webpack.config.js file for some privacy matter.

Looking forward for some help here since I have done a lot of google search but no luck finding the solution. Thank you in advance :)