2

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

本地主机： 生产：本地主机 生产

应用程序/javascript/样式表/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/样式表/组件/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。现在好多了，但还是有问题： 在此处输入图像描述

我在这里想念什么？提前致谢！

4

2 回答 2

2

在这种情况下，node_modules/trix/dist/trix.css无法正确加载。我也有它，我通过以下方式解决了它：

确保您具有与Rails 操作文本文档中描述的完全相同的设置。我也将rails安装程序与rails action_text:install.

从命名的 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";
于 2020-12-07T16:02:59.020 回答
1

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

快速解决方案是将其添加到您的 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) || []
    })
  )
}
于 2020-09-27T14:26:24.177 回答