Chrome Debugger - “No Domain” Section Showing Duplicated Paths (after Webpack)

问题

I will first include a picture, as it explains the situation the best:

My question is as follows:

The paths circled in red are really odd. Here is an example:

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

As seen, there are tons of CSS files on the left, under (no domain), 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.

My Webpack setup has sourceMap set to true for every loader that processes CSS (only posting the relevant part):

    {
      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 }
        }
      ]
    },

If I set one of the sourceMap properties to false (for instance postcss-loader), the paths are no longer duplicated like above.

But according to the various loader documentations, each loader on the chain, from start to end in the Webpack config, must be set to true for the output to be correct.

Any thoughts on what is going on here would be deeply appreciated.

EDIT:

This question has an open issue here: https://github.com/webpack-contrib/css-loader/issues/652

来源：https://stackoverflow.com/questions/52256634/chrome-debugger-no-domain-section-showing-duplicated-paths-after-webpack

标签

javascript