Jquery 如何使Select2在生产中与rails 6应用程序配合使用？

我有一个Rails 6应用程序。我正在使用select2插件。它在开发中起作用，但在生产中不起作用（Heroku）

我跑

下面是application.js

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("chartkick")
require("chart.js")
require("custom/scripts")
require("custom/programs")

这里是package.json

{
  "name": "case_reporter",
  "private": true,
  "dependencies": {
    "@primer/css": "^14.2.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "chart.js": "^2.9.3",
    "chartkick": "^3.2.0",
    "jquery": "^3.4.1",
    "select2": "^4.0.13",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

这是我在custom/programs.js中选择的js

import $ from 'jquery'
import 'select2'
import 'select2/dist/css/select2.css'

window.addEventListener('DOMContentLoaded', () => {
  $('.js-source-programs').select2()
})

这里是environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

在我的html中，我有：

= f.collection_select :program_type_id, ProgramType.all, :id, :name, { class: 'form-select js-source-programs' }

它正在开发中，没有任何问题

在Heroku的制作中，它不起作用。控制台中没有错误

是什么原因导致这在生产中不起作用

这是头

  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/
    %title CS-DM
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

    %script{:src => "https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"}
    %link{:href => "https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css", :rel => "stylesheet"}/

---

我有这个问题——这个答案为我解决了这个问题：

---

问题是在application.js中包含CSS而不添加

。因此，要么添加

样式表\u pack\u标记

，要么将CSS移动到一个已经包含在样式表\u pack\u标记中的文件。

我遇到了这个问题-这个答案为我解决了这个问题：

---

问题是在application.js中包含CSS而不添加

。因此，要么添加

样式表\u pack\u标记

，要么将CSS移动到已包含在样式表\u pack\u标记中的文件。

我记得head元素中脚本的顺序可能是原因之一。你能添加这些吗？如果控制台中没有错误，我将问这个愚蠢的问题，你有足够的数据将项目添加到选择菜单，对吗？DB中有程序类型？@RockwellRice是的，我有数据。select显示的不是select2，我记得head元素中脚本的顺序可能是原因之一。你能添加这些吗？如果控制台中没有错误，我将问这个愚蠢的问题，你有足够的数据将项目添加到选择菜单，对吗？DB中有程序类型？@RockwellRice是的，我有数据。select显示的只是select2的内容。

  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/
    %title CS-DM
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

    %script{:src => "https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"}
    %link{:href => "https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css", :rel => "stylesheet"}/