操作文本 (Trix) 样式无法在生产环境中加载（Rails 6、Heroku）

Question

由于某种原因，我正在努力制作动作文本（Trix 编辑器）图标栏以在生产环境（Heroku）中加载。我正在使用 Rails 6 和 TailwindCSS 构建一个相对简单的 Web 应用程序。操作文本在本地和生产中都具有完整的功能，但是虽然样式按预期加载到我的本地计算机上，但我无法使其在生产中工作。

本地主机： 生产：

应用程序/javascript/stylesheets/application.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/packs/application.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/stylesheets/components/actiontext.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;
    }
  }
}

app/views/shared/_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。现在好多了，但仍然有一些问题：

我在这里缺少什么？提前致谢！

Answer 1

在这种情况下，node_modules/trix/dist/trix.css无法正确加载。我也遇到了，我用以下方法解决了：

确保您的设置与Rails 操作文本文档中所述的设置完全相同。我也使用了 Rails 安装程序rails action_text:install，但这似乎实现了文档中描述的略有不同的安装（可能根据您的 webpacker / sprocket 设置而有所不同 - 不知道）

从指定的 Rails 文档中摘录：

JavaScript 包中应该需要 trix 和 @rails/actiontext。

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

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

@import "trix/dist/trix";

此外，应将此 actiontext.scss 文件导入到您的样式表包中。

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