A: Create a Sass file for your component as usual. At the top of your file, import the CSS from the component's distributed files. Underneath that, write your own rules which can override the distributed rules.

• Make sure not to write a tilde (~) at the start of the import string - otherwise, WebPack will that you are trying to do a non-relative import.
• Why? If you import the 3rd-party distributed CSS in your JavaScript files which get packed into one of your JavaScript packs, your custom CSS will be overridden by this later import. That's why you should import it at the top of your Sass file instead.

@import "jquery-bar-rating/dist/themes/bars-pill.css";

.br-theme-bars-pill .br-widget {
    white-space: nowrap;
    display: flex;
    justify-content: center;
    a {
      flex-grow: 1;
    }
}

A: Make sure that app/assets/javascdripts/application.js contains this line:

//= require rails-ujs

• Rails UJS is what picks up on the remote: true forms or links, and adds the header to accept a response in JavaScript, instead of the regular HTML. If Rails UJS is missing, this functionality will not be implemented.

A: Run ruby bin/webpack to have Webpack rebuild its JavaScript pack for your application. See here for more information on developing with Webpack in Rails.

A: Calling submit() bypasses Rails UJS, which otherwise intercepts form submits and turns them into Ajax requests. Instead of calling submit(), do one of the following:

// Option 1:
form = document.querySelector('form');
form.dispatchEvent(new Event('submit', {bubbles: true})); // you can specify more options in `Event()` for reliability across different browsers.

// Option 2:
// Use rails-ujs to submit the form
form = document.querySelector('form');
Rails.fire(form, 'submit');

• See more information here.

A: Once the map has been displayed (eg. when an event is triggered), be sure to call

map.resize()

You will need a reference to the Mapbox map object, so that you can call .resize() on it.

A: See this article

A: See this article on event listening for DOM nodes added after the page has loaded, eg. jQuery dropdown plugins

A: I recommend using FullCalendar. There are instructions for using it with Webpack. Remember to import each CSS file that you need, too! Otherwise it may not render properly on production.

A: The like_system gem provides an easy solution. Seems to be updated pretty regularly, also.