使用 Webpack 通过 NPM 包含 Zurb Foundation答案

【问题标题】：Use Webpack to include Zurb Foundation via NPM使用 Webpack 通过 NPM 包含 Zurb Foundation
【发布时间】：2016-03-10 12:41:03
【问题描述】：

我可能只是在这里密集，但是我如何使用 Webpack 来使用 npm (package.json) 来拉取最新的 Zurb Foundation 并在捆绑包中使用它？

我看到了一些例子，例如here，它们同时展示了 Zurb 和 Webpack，但它们似乎总是使用 Bower 来获得基础。我想从我的工作流程中删除 Bower，并直接使用 npm+webpack（或 +gulp，如有必要）。

想法？

我想也许我真正需要的只是一个引入最新 Zurb 基础的 package.json 示例。

【问题讨论】：

【解决方案1】：

我有同样的问题，我想放弃凉亭，所以我从 Foundation 6 开始。

有一些棘手的部分，但我现在开始工作并创建了一个样板项目：https://github.com/timaschew/r3-foundation-boilerplate

该项目使用 Redux 和 React，但您应该从 webpack.config 和 entry point 中提取最重要的东西

难点总结

通过npm i foundation-sites安装基础
用 npm 安装 jquery 以及 npm i jquery
使用脚本加载器在全局窗口范围内加载 jquery 和基础 js 文件
配置 sass-loader 以使用 sass 文件并调整 CSS 输出，如文档中所述：http://foundation.zurb.com/sites/docs/sass.html

【讨论】：

【解决方案2】：

这似乎是一个重复的问题，但我在交叉发布my answer to the other question here，因为人们可能通过搜索来到这里而没有注意到重复的链接。

这是从网络搜索中获得与问题中提到的技术相关的初学者问题的常见位置。

随意克隆它。它是通过 Unlicense 获得许可的。

背景

尽管模块兼容性问题已在 Zurb Foundation 的最新 (> 6.4) 版本中得到解决，但对于初学者来说，基本设置仍可能看起来像是黑魔法。我认为在某个地方一定还有其他可能更好的例子，但我就是找不到它们。我在这里添加我的学习之旅的成果，希望它能让某人的骑行少一些颠簸。

【讨论】：