Webpack构建时改写CSS中url()路径的解决方案：如何保留原始相对路径

我完全懂你现在的头疼——明明已经在css-loader里设了url: false，Webpack却还是把@font-face里的字体路径改成了../tflex-themes/icons/...，导致用npm引用库时图标直接挂了。咱们一步步把这个问题搞定。

问题根源分析 #

你的配置里其实已经做了不少正确的设置：css-loader禁用了url处理、字体用asset/resource输出到指定目录、CSS文件也输出到了tflex-themes子目录。但问题出在MiniCssExtractPlugin的默认路径调整逻辑——当CSS文件被输出到子目录时，它会自动改写url()里的相对路径，哪怕你已经让css-loader别碰这些路径。

具体解决方案 #

1. 给MiniCssExtractPlugin.loader设置明确的publicPath

这是最关键的一步，强制MiniCssExtractPlugin以CSS文件自身的位置作为相对路径的基准，停止自动调整路径。修改你的普通CSS loader配置：

const cssLoader = {
  test: /\.css$/i,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: './' // 核心：让相对路径以当前CSS文件所在目录为基准
      }
    },
    {
      loader: 'css-loader',
      options: {
        url: false // 保持禁用url()解析，确保原始路径不被css-loader修改
      }
    }
  ]
};

2. 验证loader的作用范围

要确保包含@font-face的CSS文件被正确的loader处理：

• 如果是普通.css文件，会被上面的cssLoader处理（已经设置了正确的publicPath和url: false）
• 如果是模块式的.module.css/.scss，你的sccsModuleLoader也已经设了url: false，但它用的是style-loader而非MiniCssExtractPlugin，所以不会有路径调整的问题

3. 检查output.publicPath的干扰

如果你的webpack配置里设置了output.publicPath（比如设为/），它可能会影响资源路径的生成。但咱们刚才给MiniCssExtractPlugin.loader设置的publicPath: './'会优先覆盖这个全局设置，所以只要确保这一步没问题就不用太担心。

4. 测试构建结果

重新跑构建命令，打开生成的CSS文件看看@font-face部分——路径应该已经保留了原始的url("./icons/tficons.woff2")。这时候CSS文件在dist/tflex-themes/下，字体在dist/tflex-themes/icons/下，./icons/...的相对路径正好能精准找到字体文件，npm引用时也不会出问题了。

补充说明 #

为什么之前url: false没彻底解决问题？因为url: false只是告诉css-loader“别解析这些url里的资源”，但MiniCssExtractPlugin在提取CSS到单独文件时，会默认根据CSS文件的输出目录自动调整相对路径。咱们手动设置publicPath: './'就是切断这个自动调整逻辑，让原始路径完完整整保留下来。

内容来源于stack exchange