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:

1. Nuxt makes it super easy to set up a "Universal JavaScript" application with server side rendering.
2. 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 webpack.config.js to modify.

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 nuxt.config.js. 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:

build: {
  extend(config) {
    for (const rule of config.module.rules) {
      if (rule.use) {
        for (const use of rule.use) {
          if (use.loader === 'sass-loader') {
            use.options = use.options || {};
            use.options.includePaths = ['node_modules/foundation-sites/scss', 'node_modules/motion-ui/src'];
          }
        }
      }
    }
  },
},

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 githug here: https://github.com/kball/nuxt-foundation-demo

P.S. —  If you’re interested in these types of topics, I send out a weekly newsletter called the ‘Friday Frontend’. Every Friday I send out 15 links to the best articles, tutorials, and announcements in CSS/SCSS, JavaScript, and assorted other awesome Front-end News. Sign up here: https://zendev.com/friday-frontend.html