Select2 Css is not loading via yarn or assets precompile

问题

I am running into a strange issue where everything is working as expected except select2. I am having Rails 6.0.0 app and installed select2 via yarn add select2.

Then i added it to application.js file. File looks like below.

    #app/javascripts/packs/application.js

    require("@rails/ujs").start()
    require("turbolinks").start()
    require("@rails/activestorage").start()
    require("channels")
    require('datatables.net')
    require('datatables.net-dt')
    require('datatables.net-bs4')
    require('select2')

    import  "bootstrap"
    import 'popper.js/dist/popper.js';
    import $ from 'jquery';
    global.$ = jQuery;
    import  "chart.js"
    import 'select2'; // globally assign select2 fn to $ element
    import 'select2/dist/css/select2.css';  // optional if you have css loader

    document.addEventListener("turbolinks:load", () => {
        setTimeout(function() {
          $('.success, .alert').fadeOut();
        }, 10000); 
    })

Right now it looks like this select2 dropdown box

When I go to Source tab in chrome developer tools, it shows only select2/dist/js folder under node_modules. I have tried precompiling and clobbering the assets but not working. The whole this is running fine in my local, only causing issue in production server.

Edit:

My production.rb

https://gist.github.com/rajanhcah/3ee13925b0ae305a6fe2c64013ab6534

回答1:

If you're including CSS in app/javascripts/packs/application.js, make sure that app/views/layouts/application.html.erb is also using the stylesheet_pack_tag (see the "Usage" section in the webpacker doc).

Otherwise, if you have stylesheet_link_tag, you can use the classical app/assets/stylesheets/application.css.

# app/assets/stylesheets/application.scss
@import 'select2/dist/css/select2'; 

来源：https://stackoverflow.com/questions/58006895/select2-css-is-not-loading-via-yarn-or-assets-precompile