Question

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

本地主机： 生产：

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 /链轮安装程序-不知道）

从命名的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) || []
    })
  )
}

Action Text（Trix）样式不会在生产中加载（Rails 6，Heroku）

2 个答案: