如何让Rails加载第三方CSS中引用的图片资源？

问题根源 #

你遇到的404错误，核心原因是Sprockets默认不会重写第三方CSS文件中的相对资源路径。第三方CSS里的url(images/bg.png)是相对于自身文件所在目录的路径，但Sprockets会默认将其解析为指向public/images/目录，而实际图片文件存放在vendor/assets/bower_components/jquery-ui/themes/smoothness/theme/images/这类深层子目录中，导致路径不匹配。

现有Sprockets环境的修复方案 #

方案1：改用Sass导入（推荐） #

1. 将app/assets/stylesheets/application.css重命名为application.scss（确保Gemfile中包含sass-rails，Rails 7默认已集成）。
2. 替换原有的Sprockets require指令为Sass的@import，使用相对于vendor/assets/bower_components/的完整路径：

@import "jquery-ui/themes/base/core.css";
@import "jquery-ui/themes/base/datepicker.css";
@import "jquery-ui/themes/smoothness/theme.css";

Sass会自动解析CSS中的相对路径，将url(images/bg.png)转换为正确的资产路径（比如/assets/jquery-ui/themes/smoothness/theme/images/bg.png），解决404问题。

方案2：手动添加资产路径（繁琐，不推荐） #

在config/initializers/assets.rb中添加图片所在目录到Sprockets的资产搜索路径：

Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'jquery-ui', 'themes', 'smoothness', 'theme', 'images')
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components', 'jquery-ui', 'themes', 'base', 'images')

重启服务器后，Sprockets会在这些目录中查找图片资源，但这种方式需要逐个添加组件的资源目录，维护成本高。

Rails 7引入第三方资源的标准方法 #

Bower已属于过时工具，Rails 7推荐以下两种主流方案：

方案1：使用Importmap（无打包工具，轻量） #

1. 在config/importmap.rb中pin jQuery和jQuery UI：

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
pin "jquery-ui", to: "https://ga.jspm.io/npm:jquery-ui@1.13.2/ui/widgets/datepicker.js"

2. 在app/javascript/application.js中导入：

import "jquery"
import "jquery-ui"

3. CSS直接从CDN引入，或下载到app/assets/stylesheets后用Sass导入：

@import "https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css";

方案2：使用CSS Bundling（配合PostCSS/Tailwind） #

1. 安装cssbundling-rails：

bundle add cssbundling-rails
rails css:install:postcss

2. 将jQuery UI的CSS文件下载到app/assets/stylesheets/vendor/目录，在app/assets/stylesheets/application.postcss.css中导入：

@import "./vendor/jquery-ui/themes/smoothness/jquery-ui.css";

PostCSS会自动处理相对路径资源，将图片复制到public/assets/并生成正确的URL。

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