如何修改Sass监听命令配置正确source map路径解决浏览器404报错

问题核心 #

结合报错信息可以定位到问题本质：

• 你的站点通过查询参数形式加载CSS资源，实际请求地址为https://www.domain.co.uk/?css=stylesheet/build.v.1620224463，访问路径中不存在独立的/stylesheet/路径段
• 浏览器解析CSS里的sourceMappingURL注释时，会以当前页面的域名根路径为基准解析相对地址。当前Sass默认生成的注释为/*# sourceMappingURL=build.css.map */，浏览器会把这个地址拼接为https://www.domain.co.uk/build.css.map，但实际source map文件对应的可访问路径是https://www.domain.co.uk/stylesheet/build.css.map，因此触发404错误。

调整后的编译命令 #

在原有watch命令基础上添加--source-map-url参数，显式指定注释中写入的source map线上路径，覆盖默认生成的错误相对路径：

sass --watch templates/default_site/stylesheet.group/scss:templates/default_site/stylesheet.group/ --style compressed --source-map-url=stylesheet/build.css.map

实际效果 #

重新触发编译后，生成的CSS文件末尾注释会更新为：
/*# sourceMappingURL=stylesheet/build.css.map */
浏览器解析这个路径时，会正确拼接出匹配实际文件位置的请求地址，404错误即可消除。

注意：如果后续站点路由规则调整，只需要将--source-map-url后面的路径替换为source map文件相对于站点根目录的实际访问路径即可，不需要调整本地文件的物理存放位置。

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