如何在运行时为CSS动态替换URL路径（CSS Modules场景）

你的核心问题在于使用了asset/inline类型，它的设计目标是生成字符串形式的Data URL，所以返回的函数调用会被当成普通字符串处理，无法成为可执行的JS表达式。要实现运行时动态获取URL的需求，需要调整webpack对CSS中URL的处理逻辑，以下是可行方案：

方案一：通过css-loader的url选项自定义处理逻辑 #

直接在css-loader的配置中拦截URL，将其替换为自定义函数调用，这是最直接的方式：

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              // 自定义URL处理函数
              url: (url) => {
                // 针对你的图片路径规则进行判断，这里示例处理所有/img/开头的路径
                if (url.startsWith('/img/')) {
                  // 返回JS表达式，css-loader会将其插入到生成的模块代码中
                  return `myLoader.get('${url}')`;
                }
                // 其他URL保持默认处理逻辑
                return true;
              }
            }
          }
        ]
      },
      {
        test: /\.(png|jpg)$/,
        // 告诉webpack不要自动解析这些资源，保留原始路径
        type: 'javascript/auto',
        // 如果不需要将图片打包到输出目录，可添加emit: false避免冗余文件
        generator: {
          emit: false
        }
      }
    ]
  }
};

方案二：自定义小型Loader替换CSS中的URL #

如果需要更灵活的匹配规则，可以写一个极简的自定义Loader来替换CSS中的url()内容：

1. 在项目中创建url-replace-loader.js：

module.exports = function (source) {
  // 正则匹配所有url(...)中的路径，替换为函数调用
  return source.replace(/url\((['"])(\/img\/[^'"]+)\1\)/g, 'url($1" + myLoader.get($2) + "$1)');
};

2. 在webpack配置中引入这个Loader（放在css-loader之前）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          'css-loader?modules',
          './url-replace-loader.js'
        ]
      },
      {
        test: /\.(png|jpg)$/,
        type: 'javascript/auto',
        generator: {
          emit: false
        }
      }
    ]
  }
};

关键注意事项 #

• 确保myLoader在运行时可访问：可以将其挂载到全局对象，或者在使用CSS模块的文件中显式导入。
• 如果图片需要部署到特定目录，可根据实际情况调整路径匹配规则，无需局限于示例中的/img/前缀。

内容的提问来源于stack exchange，提问作者Eugene Starosvetskiy