我的 Rails 应用程序没有加载 Flexslider 的 CSS答案

【问题标题】：Flexslider' CSS is not loaded on my Rails Application我的 Rails 应用程序没有加载 Flexslider 的 CSS
【发布时间】：2016-03-07 01:19:12
【问题描述】：

我正在使用来自https://github.com/constantm/Flexslider-2-Rails-Gem 的 Flexslider 2 Rails Gem。

根据文档中的信息，我调用了 JS 和 CSS，但只有 CSS 没有加载（是的，JS 工作）。

ruby -v: ruby 2.2.1p85 (2015-02-26 revision 49769) [x86_64-darwin11.0]
rails -v: Rails 4.2.1
flexslider version: flexslider 2.2.0

我的应用/资产/样式表/application.css

*= require pineapple
*= require font-awesome
*= require dropzone/basic
*= require application/style
*= require fancybox
*= require flexslider.css

PS.：我也试过 require flexslider（没有扩展）。

我的应用/资产/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery.slimscroll.min
//= require pineapple
//= require tinymce
//= require dropzone
//= require jquery-ui/sortable
//= require jquery-ui/effect-highlight
//= require jquery-ui/tooltip
//= require jquery.mjs.nestedSortable
//= require general
//= require maskedinput
//= require fancybox
//= require jquery.flexslider

我的 HTML（我在这里去掉了其他的 li 标签，但都是一样的）

<div id="carousel0" class="flexslider carousel">
    <ul class="slides">
        <li>
            <%=link_to '/page/dynamic' do %>
            <%=image_tag image_path('show-case-1.jpg'), alt: 'Show Case', title: 'Show Case', class: 'img-responsive' %>
            <%end%>
        </li>
    </ul>
</div>

我的自定义 .JS

$('#carousel0').flexslider({
    animation: 'slide',
    itemWidth: 300,
    itemMargin: 100,
    minItems: 2,
    maxItems: 4,
    pauseOnHover: true,
    slideshowSpeed: 8000
});

没有控制台错误。

感谢您的帮助。

【问题讨论】：

你确定你的自定义JS已经加载了吗？您是否添加了 console.log() 语句？如果您在控制台上没有看到任何导致我认为代码根本没有被触发的错误。这个自定义 JS 代码放在哪里？在控制台中测试代码。并检查选择器是否真正匹配任何元素。
是的 pascal betz，JS 有效。问题是：CSS 在错误的文件中。在很多情况下，调用 application.css 中的 css 是正确的，但就我而言，我的应用程序中有多个站点，它们有特定的 JS 和 CSS 需要预编译。我在这个特定的文件中调用 css 和 js 而不是 application.(JS|CSS) 并且它可以工作。感谢您的帮助。

标签： ruby-on-rails ruby flexslider

【解决方案1】：

您只是包含库并提供标记。但是您不会“连接滑块”。见第三步https://www.woothemes.com/flexslider/

【讨论】：

我的错，我忘记在我的答案中写下这个，但我已经“连接了滑块”。我将用这些数据更新我的答案。我正在尝试 rake assets:precompile now。

【解决方案2】：

你试过了吗：

*= require flexslider.sass

查看您正在使用的宝石后在黑暗中拍摄

【讨论】：

好吧，也许不是我看的更多，抱歉

【解决方案3】：

[已解决]

我的应用有一些“特定页面”。该应用程序具有多个相互独立的站点。

在我的 app/assets/stylesheets 文件夹 和 app/assets/javascript 文件夹中我在应用程序之外还有 1 个 CSS 和 JS。(JS|CSS)

有 sitetype.css 和 sitetype.js。

我在 sitetype.css 中调用了 require flexslider.css 并且 //= 在 sitetype.js 中调用了 jquery.flexslider 并且有效。

感谢大家的帮助。

【讨论】：