动作文本（Trix）样式不会在生产中加载（Rails 6，Heroku）

Question

出于某种原因，我正在努力制作动作文本（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 action_text:install 的rails 安装程序，但这似乎实现了文档中描述的略有不同的安装（可能会因您的webpacker / sprockets 设置而有所不同 - 不知道）

---

从命名的 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";

Answer 2

您需要告诉 purgecss 忽略清除 trix。由于 trix 类是通过 form.rich_text_area 上的 js 加载的，因此它不会在您的文件中找到这些类。

快速解决方案是将其添加到您的 javascript/stylesheets 文件夹中的 application.scss

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

这告诉 purgecss 在编译时不要清除 trix 类。

您还可以将 trix 类添加到您的 whitelite 以查看是否有帮助

在你的 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) || []
    })
  )
}