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工作

1 个答案: