Question

我将首先附上一张图片，因为它最好地说明了这种情况：

我的问题如下：

用红色圆圈圈出的路径确实很奇怪。这是一个示例：

C：/ Users /..../ Documents / Programming / _actual-programs / html-css-js / github-pages / name.github.io / src / C：/ Users /.../ Documents /编程/_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

如图所示，左侧CSS下有(no domain)个文件，并且每个文件的路径都重复了多次。这似乎是不对的。我相信这与CSS的源映射有关。

我的Webpack设置将每个处理CSS的加载程序的sourceMap设置为true（仅发布相关部分）：

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

如果我将sourceMap属性之一设置为false（例如postcss-loader），则不再像上面那样重复路径。

但是根据各种加载程序文档，从Webpack配置的开始到结束，链上的每个加载程序都必须设置为true才能使输出正确。

任何对这里发生的事情的想法都会深表赞赏。

编辑：

此问题在这里有待解决的问题：https://github.com/webpack-contrib/css-loader/issues/652

Chrome调试器-“无域”部分显示重复的路径（在Webpack之后）

0 个答案: