Question

我正在使用Foundation构建的网站上工作，我尝试升级到5.2.0以查看是否解决了Orbit问题（以及其他问题）。我通过data-orbit之类的数据属性初始化组件，当我在页脚中使用较旧的CDN版本并初始化时，一切正常：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation.min.js"></script>

 <script>
      $(document).foundation();
 </script>

我只使用Orbit，Reveal，Topbar和Dropdown，所以我想构建和缩小我自己的5.2.0（或主程）包。应该是直截了当的：

 <script src="/js/vendor/jquery.js"></script>
 <script src="/js/foundation/foundation.js"></script>
 <script src="/js/foundation/foundation.abide.js"></script>
 <script src="/js/foundation/foundation.accordion.js"></script>
 <script src="/js/foundation/foundation.alert.js"></script>
 <script src="/js/foundation/foundation.clearing.js"></script>
 <script src="/js/foundation/foundation.dropdown.js"></script>
 <script src="/js/foundation/foundation.equalizer.js"></script>
 <script src="/js/foundation/foundation.interchange.js"></script>
 <script src="/js/foundation/foundation.joyride.js"></script>
 <script src="/js/foundation/foundation.magellan.js"></script>
 <script src="/js/foundation/foundation.offcanvas.js"></script>
 <script src="/js/foundation/foundation.orbit.js"></script>
 <script src="/js/foundation/foundation.reveal.js"></script>
 <script src="/js/foundation/foundation.slider.js"></script>
 <script src="/js/foundation/foundation.tab.js"></script>
 <script src="/js/foundation/foundation.tooltip.js"></script>
 <script src="/js/foundation/foundation.topbar.js"></script>

 <script>
      $(document).foundation();
 </script>

我将所有内容都包含在Hail Mary中，想知道是否存在交叉依赖关系，但是每个（以前工作的）模块都无法加载。我检查过的事情：

包含网址全部正常（200 OK），而不是缓存以前的版本或其他任何内容
页面上没有JavaScript错误，或任何类型的麻烦的控制台痕迹
使用minified CDN version of 5.2.0导致完全相同的问题，这让我相信它是5.2.0的东西 - 或者至少是唯一有效的版本（5.0.2）和任何版本之间的差异我试试的其他版本
显式初始化组件（$(document).foundation('orbit');）没有区别
我在5.2.0软件包中添加了foundation.min.css，但它没有任何区别
5.0.3似乎有效（来自cdnjs.cloudflare.com），所以现在我想我正在查看包更改日志

虽然每个模块都会中断，但这是我的Orbit标记（带有EE标签）的一个示例，以防万一我做了一些愚蠢的事情：

<ul data-orbit class="orbit-container" data-options="bullets:false;timer:false;slide_number:false;">
    {product_images}
        <li class="slide" data-orbit-slide="slide-{file_id}">
            {exp:ce_img:single src='{url}' alt='{alt_text}' width='635' height='476' crop='yes'}
            {if caption}
            <div class="orbit-caption">
                {caption}
            </div>
            {/if}
        </li>
    {/product_images}
    {if product_video}
        <li class="slide" data-orbit-slide="slide-video">
            <div class="flex-video">
                {product_video width="100%"}
            </div>
        </li>
    {/if}
</ul>

还有其他一些初始化技巧吗？我的理解是你需要在页眉中加载快速单击，加载jQuery，然后加载foundation.js，然后加载页脚中的模块，最后调用$(document).foundation()来初始化页面上使用的任何模块。但显然我错过了一些东西。

Answer 1

这是SCSS。您无法编译旧的SCSS并期望它与5.0.2-5.0.3和更新版本的框架一起使用。套餐优惠，马特。

为什么Foundation 5不会初始化任何JavaScript组件？

1 个答案: