Rails引擎中如何批量预编译主题下的全部资产文件？

问题背景 #

出现报错：Sprockets::Rails::Helper::AssetNotPrecompiledError in MyEngine::Frontend#new，提示生产环境中hero_banner.jpg未被声明为预编译文件。已在config/assets.rb中添加主题资产路径：

Rails.application.config.assets.paths << MyEngine::Engine.root.join('app', 'apps', 'themes', 'default_theme','assets','stylesheets')
Rails.application.config.assets.paths << MyEngine::Engine.root.join('app', 'apps', 'themes', 'default_theme','assets', 'images')

但仍需在app/assets/config/manifest.js逐个添加文件链接才能生效，希望实现批量预编译，无需逐个编写文件链接。

解决方案 #

1. 在manifest.js中使用通配符批量链接 #

利用link_tree指令递归匹配指定目录下的所有文件，自动加入预编译清单：

// app/assets/config/manifest.js
//= link_tree ../apps/themes/default_theme/assets/stylesheets/
//= link_tree ../apps/themes/default_theme/assets/images/

路径为相对于manifest.js所在目录（app/assets/config/）的相对路径，会自动包含目标目录下所有子文件及子目录中的资产。

2. 在assets.rb中配置预编译规则 #

直接通过config.assets.precompile添加批量匹配规则，指定需要预编译的文件模式：

# config/assets.rb
# 匹配主题样式表目录下所有CSS文件
Rails.application.config.assets.precompile += Dir[MyEngine::Engine.root.join('app', 'apps', 'themes', 'default_theme', 'assets', 'stylesheets', '*.css')]
# 匹配主题图片目录下所有图片文件
Rails.application.config.assets.precompile += Dir[MyEngine::Engine.root.join('app', 'apps', 'themes', 'default_theme', 'assets', 'images', '*.{jpg,png,gif}')]

也可以用更通用的通配符匹配所有类型：

Rails.application.config.assets.precompile += %w( *.css *.jpg *.png )

3. 为CSS创建入口文件合并打包（推荐） #

在主题样式表目录下创建一个入口文件，导入所有需要的CSS文件：

// app/apps/themes/default_theme/assets/stylesheets/theme_entry.scss
@import 'default_theme';
@import 'new_theme';

然后在manifest.js中仅链接这个入口文件：

//= link theme_entry.scss

预编译时会自动将所有导入的CSS合并打包，减少清单条目，同时便于维护。

注意事项 #

• 使用通配符时需避免匹配到临时文件、未使用的资产，避免不必要的预编译。
• 执行rails assets:precompile后，检查public/assets目录确认目标资产已生成。
• 若使用link_tree，需确保相对路径准确，避免误匹配其他目录。

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