Rails 7迁移Importmaps后生产环境缺失application.css

问题描述 #

将 Rails 7 项目中的 Webpacker 替换为 Importmaps 后，开发环境运行正常，但生产环境访问时抛出 500 错误，核心提示：

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.

已执行 Importmaps 相关 rake 任务、添加 sassc-rails 用于 CSS 编译，且运行过 rails assets:precompile 命令。

相关配置文件：

• assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

• assets/stylesheets/application.scss

@import "bootstrap";
@import "./dashboard.scss";
@import "./sidebar.scss";

修复步骤 #

• 检查预编译产物
  确认 public/assets 目录下是否存在编译后的 application-<哈希值>.css 文件，以及 manifest-<哈希值>.json 文件。如果不存在，说明资产预编译过程未成功生成目标文件。

• 修正 manifest 配置
  将 assets/config/manifest.js 中的 //= link_directory ../stylesheets .css 替换为 //= link application.css，明确指定主 CSS 资产文件，避免目录遍历可能的遗漏：

  //= link_tree ../images
  //= link application.css
  //= link_tree ../../javascript .js
  //= link_tree ../../../vendor/javascript .js
  

• 确认生产环境依赖与配置

  1. 确保 Gemfile 中 sassc-rails 未被限制在仅开发环境，例如：

     gem 'sassc-rails'
     # 不要放在 group :development 块内
     

  2. 检查 config/environments/production.rb 的资产配置：

     config.assets.digest = true # 必须启用指纹功能
     config.assets.compile = false # 预编译正常时保持该值，临时排查可设为 true
     config.assets.paths << Rails.root.join("app/assets/stylesheets") # 确保样式目录被包含
     

• 重新执行预编译（指定生产环境）
  清理旧资产后重新预编译，避免缓存干扰：

  RAILS_ENV=production rails assets:clobber
  RAILS_ENV=production rails assets:precompile
  

  执行时注意控制台输出，若有 SCSS 语法错误会在此处提示。

• 排查 SCSS 语法问题
  若预编译无报错但仍未生成文件，检查 application.scss 及引入的子文件是否存在语法错误（比如未闭合的括号、无效的导入路径）。可在本地单独编译验证：

  sass app/assets/stylesheets/application.scss public/assets/application.css
  

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