积木无法通过 Foundation 6 Zurb 堆栈上的 panini 工作

Question

在新安装 Foundation 6 Zurb 堆栈时，安装构建块 sticky-shrinknav 并使用 {{> sticky-shrinknav}} 将其注入 index.html 模板显示页面上的组件，但滚动页面确实如此没有产生预期的结果。

尝试在不同位置多次安装 Zurb 堆栈。产生了相同的结果。

这是 index.html 模板：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veridata</title>
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
  <body>
    {{> sticky-shrinknav}}
    {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
    {{> body}}

    <script src="{{root}}assets/js/app.js"></script>
  </body>
</html>

我的 app.scss 文件包含：

@import 'components/building-blocks/sticky-shrinknav';

我的 config.yml 包含：

# Paths to JavaScript entry points for webpack to bundle modules
entries:
    - "src/assets/js/building-blocks/sticky-shrinknav.js"
    - "src/assets/js/app.js"

期待与本页演示的相同： https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html

相反，导航栏是静态的（不收缩或移动），滚动时一些页面组件位于导航栏上方，而其他页面组件在滚动时位于导航栏下方。如果这是一个菜鸟问题，我深表歉意。我是 Foundation 的新手。

编辑：这是 app.js 文件内容：

import $ from 'jquery';
import 'what-input';

// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';


$(document).foundation();

Answer 1

您必须在 app.js 中导入 sticky-shrinknav 组件（如果您想将其捆绑到那里）。否则，您还必须将生成的包也包含在 html 文件中。

但通常您需要 const $ = require('jquery') 或 import $ from 'jquery' 作为 sticky-shrinknav 文件中的第一行来为其加载 jQuery。

积木无法通过 Foundation 6 Zurb 堆栈上的 panini 工作

Building blocks not working via panini on Foundation 6 Zurb stack

components

zurb-foundation