title: Chrome Debugger - "No Domain" Section Showing Duplicated Paths (after Webpack)
body: <p>I will first include a picture, as it explains the situation the best:</p>
  
  <p><a href="https://i.stack.imgur.com/q2fZb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q2fZb.png" alt="Chrome Debugger - After Webpack"></a></p>
  
  <p><strong>My question is as follows:</strong></p>
  
  <p>The paths circled in red are really odd. Here is an example:</p>
  
  <blockquote>
    <p>C:/Users/..../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/C:/Users/.../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/C:/Users/.../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/C:/Users/.../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/styles.scss</p>
  </blockquote>
  
  <p>As seen, there are tons of <code>CSS</code> files on the left, under <code>(no domain)</code>, and each file has the path repeated multiple times. That does not seem right. I believe it has to do with the source maps for the CSS.</p>
  
  <p>My <code>Webpack</code> setup has <code>sourceMap</code> set to <code>true</code> for every loader that processes CSS (only posting the relevant part):</p>
  
  <pre><code>    {
        test: /\.s?[ac]ss$/,
        exclude: /node_modules/,
        use: [
          isProduction
            ? MiniCssExtractPlugin.loader
            : {
                // creates style nodes from JS strings
                loader: 'style-loader',
                options: {
                  sourceMap: true,
                  // convertToAbsoluteUrls: true
                }
              },
          {
            // CSS to CommonJS (resolves CSS imports into exported CSS string in JS bundle)
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 3
              // url: false,
              // import: false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  cssnext: {},
                  cssnano: {},
                  autoprefixer: {}
                }
              },
              sourceMap: true
            }
          },
          {
            loader: 'resolve-url-loader',
            options: {
              attempts: 1,
              sourceMap: true
            }
          },
          {
            // compiles Sass to CSS
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      },
  </code></pre>
  
  <p>If I set one of the <code>sourceMap</code> properties to <code>false</code> (for instance <code>postcss-loader</code>), the paths are no longer duplicated like above.</p>
  
  <p>But according to the various loader documentations, each loader on the chain, from start to end in the Webpack config, must be set to <code>true</code> for the output to be correct.</p>
  
  <p>Any thoughts on what is going on here would be deeply appreciated.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This question has an open issue here: <a href="https://github.com/webpack-contrib/css-loader/issues/652" rel="nofollow noreferrer">https://github.com/webpack-contrib/css-loader/issues/652</a></p>