使用Webpacker时Active Admin资源无法编译的问题

API 探路者

2026-5-29

解决Active Admin资产找不到的问题

你遇到的这个问题我之前也碰到过，把Active Admin的资产移到vendor目录后Sprockets识别不到，我整理了几个排查和解决的方向：

确认文件放置的路径是否规范
Sprockets默认只会扫描vendor/assets/stylesheets和vendor/assets/javascripts这两个子目录，而不是直接的vendor根目录。你需要把active_admin.scss（注意是scss后缀，原文件其实是SCSS格式）放到vendor/assets/stylesheets/，active_admin.js.coffee放到vendor/assets/javascripts/，这样Sprockets才能正确定位到这些文件。
修正预编译配置的文件名
你在config/initializers/assets.rb里写的是%w( active_admin.js active_admin.scss )，但报错提示找不到active_admin.css。其实Sprockets预编译时会自动把SCSS文件编译成CSS，所以预编译列表应该写成：
```
Rails.application.config.assets.precompile += %w( active_admin.js active_admin.css )
```
这样Rails会自动寻找对应的SCSS源文件并编译输出成CSS。
清除资产缓存并重启服务
Rails会缓存资产的路径信息，旧缓存可能导致识别错误。先运行命令清理缓存：
```
rails assets:clobber
```
开发环境下直接重启服务器即可；如果是生产环境，再执行预编译：
```
rails assets:precompile
```
确保Sprockets能识别vendor下的资产路径
有时候需要明确告知Sprockets加载vendor下的资产目录，在config/initializers/assets.rb里添加：
```
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets')
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'javascripts')
```
要是文件已经放在默认子目录里，这一步可能没必要，但加上能确保路径被正确识别。
检查Active Admin视图的资产引用
打开报错里提到的active_admin_logged_out.html.erb，确认第9行引用的是active_admin.css，和你的预编译配置名称保持一致，避免出现名称不匹配的情况。