ruby-on-rails 操作文本(Trix)样式在生产中不加载(Rails 6，Heroku)

hl0ma9xz 于 2023-02-10 发布在 Ruby

关注(0)|答案(2)|浏览(176)

出于某种原因，我一直在努力让Action Text（Trix编辑器）图标栏在生产（Heroku）中加载。我正在使用Rails 6和TailwindCSS构建一个相对简单的Web应用程序。Action Text在本地和生产中都功能齐全，但当样式按预期加载到我的本地机器上时，我无法让它在生产中工作。

本地主机：x1c 0d1x生产：

应用程序/javascript/样式表/应用程序.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

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

/*! purgecss start ignore */
@import "components/buttons";
@import "components/forms";
/*! purgecss end ignore */

应用程序/javascript/包/应用程序.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

import "stylesheets/application"
import "controllers"

应用程序/javascript/样式表/组件/操作文本.scss

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

// trix-toolbar {
//   .trix-button {
//     @apply bg-white border-0;
//   }

//   .trix-button-group {
//     border: 0;
//   }

//   .trix-button--icon-bold {
//     @apply rounded-tl rounded-bl;
//   }

//   .trix-button--icon-redo {
//     @apply rounded-tr rounded-br;
//   }
// }

// .trix-button--icon-attach,
// .trix-button-group-spacer,
// .trix-button--icon-decrease-nesting-level,
// .trix-button--icon-increase-nesting-level,
// .trix-button--icon-code {
//   display: none;
// }

.trix-button-group--file-tools { display: none !important; }

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

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

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

应用程序/视图/共享/_head.html.erb（相关部分）

<%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag  'application', 'data-turbolinks-track': 'reload' %>

**更新：**我已经听从了Elrik的建议，从PurgeCSS中排除了Trix & actiontext.scss。现在它更好了，但仍然有一些问题：

我错过了什么？先谢了！

ruby-on-rails

来源：https://stackoverflow.com/questions/64012746/action-text-trix-styles-doesnt-load-in-production-rails-6-heroku

2条答案

按热度按时间

ecbunoof1#

在这种情况下，node_modules/trix/dist/trix.css无法正确加载。我也遇到过这样的问题，我用以下方法解决了它：
确保您的安装与Rails Action Text Documentation中描述的完全相同。我也使用了rails action_text:install的rails安装程序，但似乎实现了与文档中描述的略有不同的安装（可能取决于您的webpacker / sprockets设置-不知道）

摘自指定的Rails文档：

trix和@rails/actiontext在您的JavaScript包中都应该是必需的。

// application.js
require("trix")
require("@rails/actiontext")

应将trix样式表导入actiontext. scss。

@import "trix/dist/trix";

此外，应该将这个actiontext.scss文件导入到样式表包中。

// application.scss
@import "./actiontext.scss";

赞(0）回复(0）举报 2023-02-10

gorkyyrv2#

你需要告诉purgecss忽略清除trix，因为trix类是通过form.rich_text_area上的js加载的，它在你的文件中找不到类。
快速解决方案是将其添加到javascript/stylesheets文件夹中的应用程序.scss中

/*! purgecss start ignore */
@import "trix/dist/trix";
/*! purgecss end ignore */

这告诉purgecss在编译时不要清除trix类。
你也可以在你的whitelite中添加trix类来看看是否有用
在您的postcss.config.js中添加

whitelistPatterns: [/trix-*/],

我遇到了和你一样的问题，我的第一个解决方案解决了它。

if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/*.html.erb',
        './app/helpers/**/*.rb',
        './app/components/**/*.rb',
        './app/javascript/**/*.js',
        
      ],
      whitelistPatterns: [/trix-*/],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

赞(0）回复(0）举报 2023-02-10

我来回答

ruby-on-rails 操作文本(Trix)样式在生产中不加载(Rails 6，Heroku)

2条答案

相关问题

热门标签

最新问答