ruby Text Trix Editor rails 7.0.7无法在生产环境中加载

8e2ybdfx  于 12个月前  发布在  Ruby
关注(0)|答案(1)|浏览(101)

我用rails 7.0.7的应用ruby 3.2.2创建了一个action文本编辑器。的操作文本在开发中工作正常,但在生产环境中无法加载。当我打开开发工具时,它在生产或开发中都找不到工作表:
404 not found mysite.com/assets/trix/dist/trix
但是编辑器在开发中工作得很好。我使用Capistrano将应用程序部署到Ubuntu服务器,它会自动预编译我的资产。如何让操作文本在rails 7生产环境中工作?
<%= javascript_importmap_tags %>在生产环境中加载速度不够快。通过Web开发控制台,我得到了这个错误:

The resource at “https://example.com/assets/application-
1f9c638bad3431a2e119d5da3d19e833a518370510fc773f111900f8393e0d7f.css” 
preloaded with link preload was not used within a few seconds. Make 
sure all attributes of the preload tag are set correctly.

app/views/layouts/application.html.erb

<%= javascript_importmap_tags %>

    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

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

action_text.css

/*

 *= require trix
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

application.css

@import "./actiontext.css";
@import "trix/dist/trix";

manifest.js

//= link actiontext.css
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
// application.js
// youtube.js

javascript/application.js

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

当我在开发环境中删除<%= javascript_importmap_tags %>时,文本编辑器看起来与生产环境中的一样。下面是它看起来像:

disho6za

disho6za1#

执行以下操作:

# config/importmap.rb

pin "trix"
pin "@rails/actiontext", to: "actiontext.js"
// app/javascript/application.js

import "trix"
import "@rails/actiontext"

您应该在app/assets/stylesheets中生成actiontext.css

<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

删除所有其他对css和actiontext的引用。

更新

最后一句话,我是认真的,你不需要别的东西。
这部分来自actiontext.css(或者是action_text.css)是不会工作的。如果顺风没有减少资产,它可能会在发展中发挥作用。在生产环境中,缩小应该是打开的,sprockets指令在到达sprockets之前被顺风剥离。

*= require trix

这就是为什么我总是使用stylesheet_link_tag "actiontext",而不将其导入application.css。

// you don't need to import this one it is already in stylesheet_link_tag
@import "./actiontext.css";
// don't need that either since you don't have that file
@import "trix/dist/trix";

另外,对样式表进行了一点修改。你的application.css是顺风编译的吗?然后你不需要将它添加到stylogram_link_tag:

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

你似乎也在manifest.js中缺少了buildings目录,否则,我不知道“顺风”样式表从何而来:

//= link_tree ../builds

不需要“//= link actiontext.css”。
import "./youtube"-否否不要做相对进口,它会破坏生产。

  • https:github.com/rails/sprockets#directives*

相关问题