Javascript 动作文本（Trix）样式不'；t生产中的负载（Rails 6，Heroku）

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

localhost: 制作：

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

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

import "stylesheets/application"
import "controllers"

@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/javascript/packs/application.js

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

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

import "stylesheets/application"
import "controllers"

@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/javascript/stylesheets/components/actiontext.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 */

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")

import "stylesheets/application"
import "controllers"

@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（相关部分）

更新： 我听从了Elrik的建议，将Trix&actiontext.scss排除在PurgeCSS之外。现在好多了，但还是有问题：

我错过了什么？

---

提前谢谢

您需要告诉purgecss忽略清除trix。由于trix类是通过js在

表单.rich\u text\u区域

上加载的，因此在您的文件中找不到类

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

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

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

您还可以将trix类添加到whitelite中，看看这是否有帮助

在postss.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) || []
    })
  )
}

---

在这种情况下，

节点\u modules/trix/dist/trix.css

无法正确加载。我也有，我用以下方法解决了它：

确保您的设置与中所述完全相同。我也将rails安装程序与

rails action\u 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";

---

推送到Heroku时资产编译的任何故障或警告输出？无：（没有任何失败。你同时解决了吗？面对同样的问题！非常感谢！这肯定是朝着正确的方向迈出的一步，但遗憾的是，我还没有做到。即使忽略了trix&actiontext.scs，图标样式也更好，但仍然有问题：（我已经用制作的相应屏幕截图更新了问题。）。