Rails 7.0.7 ActionText Trix编辑器生产环境无法加载问题

1. 清理重复的Trix样式引入 #

你的配置里存在多处重复引入Trix样式，这是导致路径混乱和预编译异常的核心原因：

• 删掉application.css里的@import "trix/dist/trix";：action_text.css已经通过*= require trix引入了Trix基础样式，重复引入会触发路径解析错误。
• 调整布局的样式加载逻辑：application.css已经导入了actiontext.css，所以不需要单独加载actiontext.css，修改app/views/layouts/application.html.erb：

  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
  

2. 修正Importmap与JavaScript引入配置 #

Rails 7用Importmap时，要确保Trix和ActionText的引入路径正确，同时解决加载慢的问题：

• 检查config/importmap.rb，确保正确pin了trix和actiontext（默认生成ActionText时会自动添加，没有的话手动加）：

  pin "trix", to: "trix/dist/trix.js"
  pin "@rails/actiontext", to: "actiontext.js"
  

• 调整javascript/application.js的引入顺序：Turbo要放在最前面，ActionText依赖Trix，所以顺序不能乱：

  import "@hotwired/turbo-rails"
  import "@rails/ujs"
  import "rails"
  import "trix"
  import "@rails/actiontext"
  import "controllers"
  import "./youtube"
  

• 解决预加载未使用的错误：在config/initializers/assets.rb里添加预编译规则：

  Rails.application.config.assets.precompile += %w( trix.js actiontext.js )
  

  部署后可以在服务器手动执行一次预编译验证：

  RAILS_ENV=production bundle exec rails assets:precompile
  

3. 精简Manifest配置 #

manifest.js里有冗余注释，调整成如下简洁版本：

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

4. 验证生产环境资产文件 #

部署后去服务器的public/assets目录检查，确认trix-*.css、trix-*.js、actiontext-*.css、actiontext-*.js这些预编译后的文件存在。如果没有，重新执行预编译并确保Capistrano同步了public/assets目录。

5. 优化Importmap加载速度 #

• 在config/environments/production.rb开启Importmap缓存：

  config.importmap.cache_sweepers = true
  

• 若服务器带宽有限，可配置资产CDN加速：

  config.action_controller.asset_host = "https://你的CDN域名.com"
  

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