javascript - Action 文本 (Trix) 样式不会在生产中加载(Rails 6、Heroku)

Question

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

本地主机: 制作:

app/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 */

app/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"

app/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 Action Text Documentation 中描述的设置完全相同.我也将 rails 安装程序与 rails action_text:install 一起使用，但这似乎实现了与文档中描述的略有不同的安装(可能因您的 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";