Rails 7中Propshaft+dartsass-rails背景图未编译至assets文件夹问题

问题原因 #

你之前用的image-url()是Sprockets提供的Sass辅助函数，而Propshaft和dartsass-rails不再依赖Sprockets，所以这个函数无法生效。HTML中的图片能正常显示是因为Rails的视图辅助函数（比如image_tag）会直接调用Propshaft的资产解析逻辑。

解决方案 #

1. 使用Ruby插值调用Rails资产辅助函数（推荐）

在Sass文件中嵌入Ruby代码，直接调用asset_path生成正确的带哈希的资产URL：

background-image: url(<%= asset_path 'fancy_background.png' %>);

编译后会自动生成类似url("/assets/fancy_background-abc123.png")的路径，完全适配Propshaft的资产指纹功能。

2. 使用相对路径

如果你的项目资产结构固定（Sass在app/assets/stylesheets，图片在app/assets/images），可以直接用相对路径：

background-image: url('images/fancy_background.png');

Propshaft会将图片复制到public/assets/images目录下，编译后的CSS位于public/assets，所以这个相对路径会正确指向图片的最终位置。

3. 配置Sass加载路径

将图片目录添加到Sass的加载路径，这样可以直接引用图片文件名：

1. 在config/initializers/assets.rb中添加配置：

Rails.application.config.sass.load_paths << Rails.root.join('app/assets/images')

2. 然后在Sass中直接写：

background-image: url('fancy_background.png');

Sass编译时会自动从图片目录查找文件，Propshaft负责处理最终的路径和指纹。

内容的提问来源于stack exchange，提问作者Phil-6