Adding SCSS Libraries like Foundation to Vue's Nuxt.js
I recently wrote about adding Vue.js to a Foundation ZURB stack project. Today I want to look at the opposite situation: Integrating Foundation as an SCSS library into a Vue project, or more specifically, a Nuxt.js project.
Nuxt.js is a higher level framework built on top of Vue.js that provides two major benefits:
- Nuxt prepackages a set a "golden path" set of choices of the many components you can use.
Both of these benefits are fantastic - I've been using Nuxt on a couple of client projects, and it makes it essentially trivial to set up an application that has all the SEO and initial pageload benefits of a server rendered application along with the fluidity and power of a SPA. It also helps tremendously to have a set of sensible defaults with regards to application structure, routing, and pre-set up layout functionality.
The Challenge: Going Beyond The Defaults
As always with prepackaged solutions, challenges sometimes arrive when adding new functionality outside of what the creators had imagined. Nuxt does a pretty good job of making this easy, but there was one area that I ran into as I got started that took me a little while to figure out.
Dropping in new CSS files is not a problem, nor is building complete CSS files from self-contained SCSS. However, I like to use Foundation's SCSS as a library to import into my own files, so when I set up a project I point webpack's
sass-loader to include paths from Foundation and Motion UI. Using
mixins or functions from other SCSS libraries requires the same type of setup.
The challenge with doing this is that Nuxt generates it's webpack config
programatically - there's no
We can install sass-loader (and its peer dependency node-sass) with a simple
npm install --save-dev sass-loader node-sass, but now what?
The Answer: Extend the Build Config
While Nuxt doesn't have a
webpack.config.js file to modify, they
do allow you to extend the build config in
We can add new webpack rules there... but there's one more catch: Nuxt already
has a rule for
scss, so adding another won't work quite like we
expect. Instead, we need to find that rule and modify it, like so:
Voila! Now we're able to
@import sass from Foundation and Motion UI wherever we want it!
If you'd like to start from a sample project with this working, I've set up a repository on github here: https://github.com/kball/nuxt-foundation-demo