在Foundation 6 Zurb堆栈上,构建模块无法通过Panini工作

时间:2018-12-30 03:29:56

标签: components zurb-foundation

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

1 个答案:

答案 0 :(得分:1)

您必须在app.js中导入sticky-shrinknav组件(如果您希望将其捆绑在其中)。否则,您还必须在HTML文件中包含生成的包。

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