WebpackでSCSSをコンパイル時にsourcemapが生成されているのですが、元のSCSSファイルの記載場所に辿れません。

Question

WebpackでSCSSをコンパイル時にsourcemapが生成されているのですが、chormeの検証ツールで元のSCSSファイルの記載場所に辿れません。
色々調べたのですが何が原因か全くわかりませんでした。

コンパイル時に外部ライブラリのCSSも一緒にコンパイルしているのですが原因でしょうか？
一応、外してコンパイルしたのですがダメでした。

以下、設定を記載します。よろしくお願いします。

index.js

import '../scss/library/XXXXX.css';
import '../scss/style.scss';

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "test",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --mode development --watch",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/polyfill": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.0.2",
    "css-loader": "^3.5.3",
    "ejs": "^3.1.3",
    "ejs-plain-loader": "^1.4.1",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.0",
    "imagemin-svgo": "^8.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "imagesloaded": "^4.1.4",
    "import-glob-loader": "^1.1.0",
    "jquery": "^3.5.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "stylelint": "^13.6.0",
    "stylelint-webpack-plugin": "^2.0.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "jquery": "^3.5.1",
    "tether": "^1.4.7"
  },
  "browserslist": [
    "last 2 versions",
    "ie >= 11",
    "Android 4.0"
  ]
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
//html
const HtmlWebpackPlugin = require('html-webpack-plugin');
//CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ImageminMozjpeg = require('imagemin-mozjpeg');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
  entry: {
    'index': path.join(__dirname, '/src/js/index.js'),
  },
  devtool: 'source-map',
  output: {
    filename: 'js/[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: `${__dirname}/dist`,
    watchContentBase: true,
    historyApiFallback: true,
    compress: true,
    port: 8080,
    open: true,
    inline: true
  },
  module:{
    rules: [
        {
          test: /.js$/,
          exclude: /node_modules/,
          use:
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                ]
              }
            }
        },
        {
          test: /.(jpg|png|gif|svg)$/,
          use: {
            loader: 'file-loader',
            options: {
              name: '/img/[name].[hash].[ext]',
            }
          }
        },
        {
          test:/.(scss|css)$/,
          use:[
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: 'css-loader',
              options: {
                url: false,
                sourceMap: true
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')({
                    grid: 'autoplace'
                  }),
                ]
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sassOptions: {
                  outputStyle: 'compressed',
                  sourceMap: true
                },
              },
            },
            {
              loader: 'import-glob-loader',
            },
          ]
        },
        {
          test: /.ejs$/i,
          use: [
            {
              loader: 'html-loader',
              options: {
                minimize: false
              },
            },
            {
              loader: 'ejs-plain-loader'
            }
          ]
        },
      ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template : 'src/ejs/index.ejs',
      minify: false,
    }),
    new HtmlWebpackPlugin({
      filename: 'about/index.html',
      template : 'src/ejs/about.ejs',
      minify: false,
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [`${__dirname}/dist/js/*.*.js`, `${__dirname}/dist/css/*.*.css`]
    }),
    new MiniCssExtractPlugin({
      filename: 'css/style.[hash].css',
    }),
    new StylelintPlugin({
        fix: true,
    }),
    new CopyPlugin({
      patterns: [
        { from: 'src/img', to: 'img' }
      ],
    }),
    new ImageminPlugin({
      test: /.(jpe?g|png|gif|svg)$/i,
      pngquant: {
        quality: '65-80'
      },
      gifsicle: {
        interlaced: false,
        optimizationLevel: 1,
        colors: 256
      },
      svgo: {
      },
      plugins: [
        ImageminMozjpeg({
          quality: 60,
          progressive: false
        })
      ]
    }),
  ]
}

Answer 1

postcss-loaderのオプションに**sourceMap: true,**を追加したら無事に辿れるようになりました。

            {
              loader: 'postcss-loader',
              options: {
               sourceMap: true,
                plugins: [
                  require('autoprefixer')({
                    grid: 'autoplace'
                  }),
                ]
              }
            },