Webpack：如何在CSS Sourcemap中获得相对路径

Question

我正在使用Mac，Chrome 69，Webpack 3.8.1，css-loader 1.0.0，style-loader 0.19.1

我在webpack配置中设置了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 devtool源地图是独立的，因此我认为css-loader是最有可能发生这种情况的地方。

更新我的publicPath是“ /”，publicUrl是“”。直接从Create-react-app

获取配置

Answer 1

尝试convertToAbsoluteUrls : false选项和

  

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

     

如果convertToAbsoluteUrls和sourceMaps均启用，则相对   网址将在CSS之前立即转换为绝对网址   注入页面。

Ref：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
            }
          }
        ]
      }
    ]