SCSS编译为CSS时图片路径映射错误报404如何解决

问题本质 #

SCSS原生编译逻辑不会自动根据输出CSS的存放目录改写url()内的资源路径，没有构建工具介入的情况下，会直接把SCSS里写的路径原封不动输出到CSS中。当前路径偏差的核心原因是写SCSS路径时参照了SCSS源文件的目录层级，没有对齐最终输出CSS文件的目录层级：输出CSS比SCSS源文件高1级，对应到图片的正确相对路径只需要1层父级目录引用，现有代码写了2层，自然会触发静态资源404。

可落地的配置/修改方案 #

方案1：无构建工具介入时直接修正源码路径 #

如果是用命令行直接调用sass编译，没有搭配其他构建插件，直接修改SCSS源码里的资源路径即可：
把原来的错误写法：

.modal__image--1 {
  background-image: url("../../images/sparkling.jpg");
  background-position: center;
}

改成：

.modal__image--1 {
  background-image: url("../images/sparkling.jpg");
  background-position: center;
}

编译后输出的CSS路径就会和预期一致，直接匹配CSS文件所在目录到图片目录的层级关系。

方案2：通过构建工具配置自动改写路径（工程化项目推荐） #

如果是团队协作的工程项目，不需要手动对齐每个SCSS文件的路径，靠编译插件自动计算输出路径即可，不同工具配置逻辑如下：

• 命令行sass + PostCSS工作流：安装postcss和postcss-url依赖，在SCSS编译完成后调用PostCSS处理生成的CSS文件，postcss-url会自动根据CSS输出位置重写所有url()内的相对资源路径，不需要手动修改SCSS源码。
• Webpack + sass-loader工作流：开启css-loader的资源解析能力，不要把图片类静态资源加入css-loader的排除规则，css-loader会自动识别样式内的url()引用，结合输出CSS的目录位置自动修正相对路径；同时建议开启sass-loader的sourceMap配置，提升路径计算准确率。
• Vite工作流：Vite内置的预处理器能力默认支持样式相对路径自动改写，只需要保证SCSS里写的路径是相对于当前SCSS文件的正确相对路径即可，编译时会自动计算输出CSS对应的路径层级。如果出现路径异常，检查是否在scss.preprocessorOptions中配置了错误的loadPath，或者路径别名没有正确映射。
• Gulp工作流：在gulp-sass的编译管道中接入gulp-postcss + postcss-url，或者直接用gulp-replace做路径字符串替换，把多写的一层../批量替换掉即可。

注意事项 #

• 除非项目明确固定静态资源的根部署路径，否则不要在样式里写/images/xxx.jpg这类根绝对路径，不然项目部署到站点子路径时依然会出现404问题，相对路径配合构建工具自动改写是兼容性最高的方案。

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