Question

我正在使用基础6.4.3和ZURB模板。出于某种原因，我无法让ScrollReveal javascript工作。我总是得到错误AppArea.qml。当我从外部URL加载ScrollReveal时，它可以工作。然而，一旦Foundation通过它所做的任何事情（babel，webpack，无论如何）运行它，它会向ScrollReveal.js添加一堆webpack相关的东西。我不能为我的生活弄清楚为什么这会破坏或我做错了什么。我尝试了很多不同的东西。

你可以看到原始ScrollReveal.js之间的区别，以及它在Gulp，webpack，babel等运行后会发生什么：

https://www.diffchecker.com/NUPl2t0I

My Foundation app.js文件如下所示：

Uncaught ReferenceError: ScrollReveal is not defined

我的页面上的JS看起来像这样：

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


window.$ = $;
window.jQuery = $;

require('./scrollreveal.js');

//also tried this which does not seem to work either..
//import ScrollReveal from 'scrollreveal';


import './lib/foundation-explicit-pieces';

不确定我哪里出错以及导致$(document).foundation().ready(function(){ window.sr = ScrollReveal({ reset: true }); sr.reveal('.people-image', {opacity: 0.9,duration:3000}); });错误的原因。

Answer 1

在config.yml文件中，您需要在sass下编写：

sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/scrollreveal/src"

在我的app.js中写道：

import ScrollReveal from 'scrollreveal'

尝试：在你的终端再次安装npm，这应该会有效！

Webpack打破ScrollReveal javascript？

1 个答案: