Select2 Css is not loading via yarn or assets precompile - ruby-on-rails

Question

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

Answer 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';