在 Foundation 6 Zurb 堆栈上无法通过 panini 工作的构建块答案

【问题标题】：Building blocks not working via panini on Foundation 6 Zurb stack在 Foundation 6 Zurb 堆栈上无法通过 panini 工作的构建块
【发布时间】：2018-12-30 03:29:55
【问题描述】：

在新安装 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();

【问题讨论】：

如果有错误请检查浏览器控制台。我没有看到foundation.js 脚本参考。
这不是浏览器控制台。请右键单击 - 在浏览器中检查，切换到底部的控制台选项卡并加载生成的 html 页面。
Firefox 和 Chrome 的控制台都是空的。我也看不到在哪里调用了foundation.js，但是页面可以响应调整大小。我认为这意味着它在某处被调用，是吗？
一般不会，响应式来自 CSS。滚动时浏览器控制台中是否有任何内容？
还检查滚动时 body 元素是否获得 sticky-shrinknav-wrapper 类。如果是这样，唯一的问题是构建块样式（请参阅它的 scss 文件中的变量以及那里的 padding-top 设置之类的东西）。

标签： components zurb-foundation

【解决方案1】：

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

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

【讨论】：