title: Are Webpack SASS Source-maps Broken?
body: <p>I'm evaluating Webpack as a replacement for Grunt in my company's projects. Everything seems great, apart from SASS source-maps which point to incorrect files for project stylesheets and have the incorrect paths for library ones. For example, using the following minimal configuration, the sole rule is attributed to Bootstrap's <code>_reboot.scss</code> and <code>node_modules</code> is shown as being nested under <code>src</code>.</p>
  
  <p>Have I set something up wrong, or is this an actual problem? If so, does anyone know which project I should be submitting a bug report to?</p>
  
  <p><strong>package.json</strong></p>
  
  
  
  <pre><code>{
    "name": "webpack-test",
    "version": "1.0.0",
    "license": "UNLICENSED",
    "scripts": {
      "build": "webpack"
    },
    "dependencies": {
      "webpack": "^4.12.0",
      "webpack-cli": "^3.0.8",
      "sass-loader": "^7.0.3",
      "node-sass": "^4.9.0",
      "css-loader": "^0.28.11",
      "mini-css-extract-plugin": "^0.4.0",
      "bootstrap": "^4.1.1"
    }
  }
  </code></pre>
  
  
  
  <p><strong>webpack.config.js</strong></p>
  
  
  
  <pre><code>const path = require("path");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
      mode: "development",
      plugins: [
          new MiniCssExtractPlugin()
      ],
  
      entry: "./src/main.scss",
      output: {
          path: path.resolve(__dirname, "dist")
      },
      devtool: "source-map",
      module: {
          rules: [
              {
                  test: /\.(scss)$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      {
                          loader: "css-loader",
                          options: {
                              sourceMap: true
                          }
                      },
                      {
                          loader: "sass-loader",
                          options: {
                              sourceMap: true
                          }
                      }
                  ]
              }
          ]
      }
  };
  </code></pre>
  
  
  
  <p><strong>src/main.scss</strong></p>
  
  
  
  <pre><code>@import "~bootstrap/scss/bootstrap";
  
  body {
      color: blue;
  }
  </code></pre>