Webpack css-loader设置url:false仍移除url()前导斜杠的问题排查

我一眼就注意到你加载器列表里的resolve-url-loader——这就是导致前导斜杠被莫名移除的罪魁祸首！

虽然你已经给css-loader设置了url: false，但resolve-url-loader会在sass-loader编译之后、css-loader之前介入处理URL路径。它的默认行为会把以/开头的URL，当作相对于它配置的root（你的项目src目录）的相对路径，所以会自动去掉前导斜杠，把/path/to/file转换成path/to/file。

两种解决方法，你可以根据自己的需求选择： #

方案1：直接移除resolve-url-loader（推荐，如果你不需要它的话）

如果你的Sass代码里没有用到相对路径的资源引用，或者不需要借助它处理source map的路径映射，那这个加载器对你来说是多余的，直接删掉就行：

// config-overrides.js
const { override, adjustStyleLoaders } = require('customize-cra');
module.exports = override(
  adjustStyleLoaders(({ use }) => {
    // 找到resolve-url-loader并移除
    const resolveUrlLoaderIndex = use.findIndex(loader => loader.loader.includes('resolve-url-loader'));
    if (resolveUrlLoaderIndex !== -1) {
      use.splice(resolveUrlLoaderIndex, 1);
    }
    // 确保css-loader的url选项是false
    const cssLoader = use.find(loader => loader.loader.includes('css-loader'));
    if (cssLoader) {
      cssLoader.options = { ...cssLoader.options, url: false };
    }
  })
);

方案2：修改resolve-url-loader的配置，保留前导斜杠

如果你必须保留resolve-url-loader（比如要处理相对路径资源），可以修改它的配置，让它跳过对绝对路径URL的处理：

// config-overrides.js
const { override, adjustStyleLoaders } = require('customize-cra');
module.exports = override(
  adjustStyleLoaders(({ use }) => {
    // 设置css-loader的url: false
    const cssLoader = use.find(loader => loader.loader.includes('css-loader'));
    if (cssLoader) {
      cssLoader.options = { ...cssLoader.options, url: false };
    }
    // 修改resolve-url-loader的配置
    const resolveUrlLoader = use.find(loader => loader.loader.includes('resolve-url-loader'));
    if (resolveUrlLoader) {
      resolveUrlLoader.options = {
        ...resolveUrlLoader.options,
        // 跳过对绝对路径URL的解析，保留前导斜杠
        noResolve: true,
        // 同时把root设为域根，避免路径转换
        root: '/'
      };
    }
  })
);

验证效果 #

修改完配置后，重新执行构建命令，检查编译后的CSS文件，你会发现url('/path/to/file')的前导斜杠已经被保留下来了。

内容的提问来源于stack exchange，提问作者Drazen Bjelovuk