网页包：如何在css sourcemap中获取相对路径

Question

我使用的是mac、chrome 69、webpack 3.8.1、css loader 1.0.0、style loader 0.19.1

我在我的网页配置中设置了如下css sourcemap：

test: /\.css$/,
use: [
  {
    loader: require.resolve('style-loader'),
    options: {
      sourceMap: true
    }
  },

  {
    loader: require.resolve('css-loader'),
    options: {
      importLoaders: 1,
      sourceMap: true
    },
  },

在chrome devTool元素检查器中，它看起来像这样：

问题是，是否可以将源映射缩短为相对于我的项目根路径？

所以不是/Users/xunyang/workspace/myProject/src/index。css

我希望它显示为/src/index。css

经过一些实验，看起来css源地图独立于webpack devtools源地图，所以我认为css-loader是最有可能发生的地方。

更新我的公共路径是'/'，公共URL是"。配置直接取自Create-react-app

Answer 1

尝试将convertToAbsoluteUrls:false选项与

启用源映射时，将相对URL转换为绝对URL

如果同时启用了ConvertToAbsolutionUrls和sourceMaps，相对URL将在css注入页面之前转换为绝对URL。

裁判：https://webpack.js.org/loaders/style-loader/#converttoabsoluteurls

rules: [
      {
        test: /\.css$/,
        use: [
          { 
            loader: 'style-loader',
            options: {
              sourceMap: true,
              convertToAbsoluteUrls: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              convertToAbsoluteUrls: false
            }
          }
        ]
      }
    ]