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

Posted 2023-05-07

【中文标题】Select2 Css 未通过纱线或资产预编译加载

【英文标题】：Select2 Css is not loading via yarn or assets precompile

【发布时间】：2020-01-20 05:52:52

【问题描述】：

我遇到了一个奇怪的问题，除了 select2，一切都按预期工作。我有 Rails 6.0.0 应用程序并通过yarn add select2 安装了 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 dropdown box

当我转到 chrome 开发者工具中的 Source 选项卡时，它只显示 node_modules 下的 select2/dist/js 文件夹。我已经尝试了 precompiling 和 clobbering 资产但没有工作。整个这在我的本地运行良好，只会导致生产服务器出现问题。

编辑：

我的生产.rb

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

【参考方案1】：

如果您在 app/javascripts/packs/application.js 中包含 CSS，请确保 app/views/layouts/application.html.erb 也使用 stylesheet_pack_tag（请参阅 webpacker 文档中的 "Usage" section）。

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

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

【讨论】：

您好，我理解您的担忧。我想到了为什么我还要写这行 import 'select2/dist/css/select2.css' 。它应该自动包含在 require('select2') 中。另外，如果你说的是对的，它在当地的工作情况如何？

我还尝试将@import "select2"; 放入application.scss。它说没有找到

如果是通过yarn添加的，需要给出完整路径：@import 'select2/dist/css/select2';

好！我用评论编辑了我的答案。您需要提供完整路径的原因是因为大多数情况下，外部库有多个包含 .css 和 js 文件的路径（有时只是 /dist/file.js 和 /dist/file.js，有时是 dist/css/file.css 和 src/css/file.css）...资产管道无法知道您想要哪个。

这对我也有用。具体来说，我进入app/views/layouts/application.html.erb 并添加了<%= stylesheet_pack_tag 'application' %> 行（并且还保留了stylesheet_link_tag 行）。感谢您的回答和帮助