SCSS/CSS中引用文件名含#的图片报模块找不到错误如何解决

报错的核心原因是URL标准中#属于片段（hash）分隔符，不属于文件路径的组成部分，webpack、Vite等构建工具在解析CSS/SCSS里的url()路径时，会默认截断#之后的所有内容，因此只会尝试查找./assets/test这个不存在的文件，最终触发模块找不到的错误。
两种尝试过的方案无效的原因：

• 把路径写为test/#1234属于直接修改了路径层级，相当于查找test目录下名为1234的资源，路径本身就是错误的
• 把路径写为test%231234时，%23作为#的一次URL编码，会被css-loader等构建加载器在解析阶段自动解码回#，最终还是会触发路径截断，等于没有做处理。

按推荐优先级从高到低排列：

• 方案1（最稳妥，零兼容问题）：直接重命名静态资源文件，移除文件名里的#这类URL特殊字符，替换为-、_等普通字符即可，比如将文件改名为test-1234.png，引入代码保持常规写法：

  background: url('./assets/test-1234.png');
  

  文件名带URL特殊字符除了会导致构建解析失败，还可能触发CDN缓存异常、旧版浏览器资源加载失败等问题，是长期维护成本最低的方案。
• 方案2（必须保留原文件名时适用）：对#做双重URL编码，将路径中的#替换为%2523。原理是构建工具第一次解析时会把%25解码为%，最终传递给资源解析模块的路径会变成%23，不会被识别为片段分隔符，就能正确匹配到原文件：

  background: url('./assets/test%25231234.png');
  

  该写法在webpack4+、Vite3+的默认构建配置下均可正常生效，不需要额外修改构建配置。
• 方案3（适配SCSS预处理器场景）：如果使用SCSS预处理器，可以通过插值语法包裹文件名，绕过预处理器对#的特殊识别，配合双重编码写法适配性更强：

  $bgFile: 'test%25231234.png';
  background: url('./assets/#{$bgFile}');
  

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