webpack css-loader删除url（）中的领先斜线

Question

我在SCSS文件中有一个路径设置到我需要从域根目录中引用的资源。问题是CSS-LOADER在构建过程中删除了领先的斜线，即使选项{url：false}。

url('/path/to/file') -> url('path/to/file')

有什么想法，为什么这样做以及如何避免？谢谢。

编辑：应该提到我正在使用 create-react-app with react-app-rewired 。我的配置：

// config-overrides.js

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(({ use: [, css] }) => {
    css.options = { ...css.options, url: false };
  })
);

console.log样式加载程序：

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 1, sourceMap: true, url: false }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: {
      importLoaders: 1,
      sourceMap: true,
      modules: [Object],
      url: false
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 3, sourceMap: true, url: false }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/resolve-url-loader/index.js',
    options: {
      sourceMap: true,
      root: '/Users/323782896/Documents/Projects/ReactUI/src'
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/sass-loader/dist/cjs.js',
    options: { sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: {
      importLoaders: 3,
      sourceMap: true,
      modules: [Object],
      url: false
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/resolve-url-loader/index.js',
    options: {
      sourceMap: true,
      root: '/Users/323782896/Documents/Projects/ReactUI/src'
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/sass-loader/dist/cjs.js',
    options: { sourceMap: true }
  }
]

可能是负责的其他加载程序之一吗？

Answer 1

事实证明，这是resolve-url-loader，特别是 root 选项设置为项目SRC由CRA。

类似于CSS-LOADER中的（现在已停用）选项。
该字符串可能是空的，被固定到绝对的uris。
仅在设置此选项时才处理绝对URI。

不确定它是如何变化的，但这只会在升级到CRA V4后才成为我的问题。无论如何，以下调整（删除root选项）似乎可以解决问题：

// config-overrides.js

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(({ use: [miniExtract, css, postcss, resolveUrl, sass] }) => {
    css.options = { ...css.options, url: false };
    if (resolveUrl) {
      delete resolveUrl.options.root;
    }
  })
);