Use Webpack to include Zurb Foundation via NPM

Question

I'm probably just being dense here, but how can I use Webpack to use npm (package.json) to pull down latest Zurb Foundation and use it in the bundle?

I see examples, for example here, that demonstrate Zurb and Webpack together, but they always seem to use Bower to get foundation. I'd like to eliminate Bower from my workflow and use straight npm+webpack (or +gulp if necessary).

Thoughts?

---

I guess maybe all I really need is an example of package.json that pulls in latest Zurb foundation.

Answer 1

I had the same issue, I wanted to drop bower, so I started with Foundation 6.

There were some tricky parts, but I got it working now and created a boilerplate project: https://github.com/timaschew/r3-foundation-boilerplate

The project uses Redux and React, but you should extract the most important stuff from the webpack.config and the entry point

Summary of the tricky parts

• install foundation via npm i foundation-sites
• install jquery with npm as well npm i jquery
• use a script-loader to load jquery and foundation js files in the global window scope
• configure sass-loader to use sass files and adjust the CSS Output like descripted in the docs: http://foundation.zurb.com/sites/docs/sass.html