search

allanwhite / spike-webpack

Building a demo based on Spike, with Webpack.
1 stars 0 forks source link

Moving Foundation from Gulp/Bower to Webpack #1

Open allanwhite opened 8 years ago

allanwhite commented 8 years ago

Spike is very interesting and completely modular, but with all that flexibility comes the challenge of bolting the parts you need together.

In the process of grafting the front-end framework that I've been using on other projects to this one, I've encountered a few obstacles. Spike is very opinionated regarding CSS (preferring postcss over Sass)—but, thanks to Webpack's modularity, shouldn't be a deal-breaker.

  1. Webpack can totally do foundation or any other framework (see this repo) but organizationally, it's very different than the gulp/bower combo that it uses by default. It's basically putting those packages in node_modules with all the other ones webpack uses.
  2. Since I don't know what every webpack module does, this adds no small amount of confusion regarding dependencies and peer dependencies.
  3. It's necessary to ensure that all the sass paths are passed through near-infinite number of wrappers around node-sass, so foundation and other custom modules can parse correctly. In Gulp, this is done with the includePaths attribute, which I think works with minimatch globs as well (or not). Example path: ./node_modules/foundation-sites/foundation/scss as well as a few others.
  4. The repo doesn't currently contain any Scss source, as I couldn't get it to parse right. I decided to focus on the content parts first. Here's the Scss source I'd intend to use, from the Echo Guide project. At the moment, this project is using a precompiled CSS from Echo Guide.

Follow-on tasks would be ensuring postcss/autoprefixer (included by default I think) works, and any JS concat/min stuff.

rr1000 commented 8 years ago

I'll take this.