Select2 Css未通过纱线或资产预编译加载 [英] Select2 Css is not loading via yarn or assets precompile

问题描述

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

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.

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

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

现在看起来像这样 选择2下拉框

当我转到chrome开发人员工具中的源"选项卡时，它仅在node_modules下显示select2/dist/js文件夹.我已尝试precompiling和clobbering资产，但是无法正常工作.整个过程在我的本地环境中运行良好，仅导致生产服务器出现问题.

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.

我的production.rb

My production.rb

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

推荐答案

如果要在app/javascripts/packs/application.js中包含CSS，请确保app/views/layouts/application.html.erb也在使用stylesheet_pack_tag(请参见).

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).

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

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

这篇关于Select2 Css未通过纱线或资产预编译加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！