最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Action Text (Trix) styles doesn't load in production (Rails 6, Heroku) - Stack Overflow

programmeradmin2浏览0评论

For some reason I'm struggling with making Action Text (Trix editor) icons bar to load in production (Heroku). I'm building a relatively simple web app using Rails 6 & TailwindCSS. Action Text is fully functional both locally and in production, but while styles are loaded as expected on my local machine, I'm unable to make it work in production.

localhost: production:

app/javascript/stylesheets/application.scss

@tailwind base;
@tailwind ponents;
@tailwind utilities;

@import 'trix/dist/trix.css';
@import "ponents/actiontext";

/*! purgecss start ignore */
@import "ponents/buttons";
@import "ponents/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/ponents/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 (relevant part)

  <%= 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' %>

UPDATE: I have followed Elrik's advice and excluded Trix & actiontext.scss from PurgeCSS. Now it's better, but still something is off:

What am I missing here? Thanks in advance!

For some reason I'm struggling with making Action Text (Trix editor) icons bar to load in production (Heroku). I'm building a relatively simple web app using Rails 6 & TailwindCSS. Action Text is fully functional both locally and in production, but while styles are loaded as expected on my local machine, I'm unable to make it work in production.

localhost: production:

app/javascript/stylesheets/application.scss

@tailwind base;
@tailwind ponents;
@tailwind utilities;

@import 'trix/dist/trix.css';
@import "ponents/actiontext";

/*! purgecss start ignore */
@import "ponents/buttons";
@import "ponents/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/ponents/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 (relevant part)

  <%= 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' %>

UPDATE: I have followed Elrik's advice and excluded Trix & actiontext.scss from PurgeCSS. Now it's better, but still something is off:

What am I missing here? Thanks in advance!

Share Improve this question edited Sep 28, 2020 at 6:19 NShemesh asked Sep 22, 2020 at 15:19 NShemeshNShemesh 751 silver badge7 bronze badges 3
  • Any failure or warning output from asset pilation when pushing to Heroku? – rossta Commented Sep 22, 2020 at 22:35
  • Nothing :( no failures of any kind. – NShemesh Commented Sep 23, 2020 at 6:41
  • Did you solve it in the meantime? Confronted with the same issue! – fydelio Commented Dec 5, 2020 at 9:31
Add a ment  | 

2 Answers 2

Reset to default 7

In that case the node_modules/trix/dist/trix.css doesn't load properly. I had it too and I solved it the following way:

Make sure you have the exact same setup as described in the Rails Action Text Documentation. I too used the rails installer with rails action_text:install, but that seems to implement a slightly different installation as described in the documentation (maybe differing depending on your webpacker / sprockets setup - don't know)


Extract from the named Rails documentation:

Both trix and @rails/actiontext should be required in your JavaScript pack.

// application.js
require("trix")
require("@rails/actiontext")

The trix stylesheet should be imported into actiontext.scss.

@import "trix/dist/trix";

Additionally, this actiontext.scss file should be imported into your stylesheet pack.

// application.scss
@import "./actiontext.scss";

You need to tell purgecss to ignore purging trix. Since trix classes is loaded through js on the form.rich_text_area , it doesn't find the classes in your files.

Quick solution is to add this to your application.scss in your javascript/stylesheets folder

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

This tells the purgecss to not purge trix classes when it piles.

You can also add trix classes to your whitelite to see if that helps

in your postcss.config.js add

whitelistPatterns: [/trix-*/],

I had the same issue as you and my first solutions solved it.

if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/*.html.erb',
        './app/helpers/**/*.rb',
        './app/ponents/**/*.rb',
        './app/javascript/**/*.js',
        
      ],
      whitelistPatterns: [/trix-*/],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}
发布评论

评论列表(0)

  1. 暂无评论