Select2 CSS 未通过纱线或资产预编译加载

Question

我遇到了一个奇怪的问题，除了 select2 之外，一切都按预期工作。我有 Rails 6.0.0 应用程序并通过安装 select2 yarn add select2。

然后我将其添加到 application.js 文件中。文件如下所示。

    #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); 
    })

现在看起来像这个 select2 下拉框

当我转到 Chrome 开发人员工具中的“源”选项卡时，它仅显示select2/dist/jsnode_modules 下的文件夹。我已经尝试precompiling过clobbering资产但不起作用。整个过程在我的本地运行良好，只会在生产服务器中引起问题。

编辑：

我的作品.rb

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

Answer 1

如果您在 中包含 CSS app/javascripts/packs/application.js，请确保它app/views/layouts/application.html.erb也使用了stylesheet_pack_tag（请参阅webpacker 文档中的“用法”部分）。

否则，如果你有stylesheet_link_tag，你可以使用经典的app/assets/stylesheets/application.css.

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