Journal Contact

How to use Bourbon with single-file Vue components.


One of my favourite things about writing apps with VueJS is the ability to compose your application out of multiple components that each live in their own file. These components can contain the template, logic, and styling, all in a single file! It looks something like this:

<template>
<div class="name-container">
  <h3 class="name">Hello {{ name }}!</h3>
</div>
</template>
<script>
export default {
  name: "MyComponent",
  data(){
    return {
      name: "Megan Newman"
    }
  }
}
</script>
<style lang="sass">
.name-container{
  background:#fefefe;
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  padding:20px;
  .name { color: #6dd38f; }
}
</style>

Pretty awesome right? Everything we need to know about this component is all encapsulated in this single file. You'll even notice we can use Sass (or Less, or Stylus!) in our style section, which is fantastic. So how do we go about using a library like Bourbon to provide us with the plethora of useful mixins we might want? Fortunately, it's pretty easy.

If you're using Browserify, all you need to do is configure Vueify to load Bourbon as an include path. First you'll need to install the node-bourbon package from NPM. If you're using gulp go ahead and require node-bourbon:

var bourbon = require("node-bourbon");

Next we simply configure Vueify to include Bourbon.

vueify.compiler.applyConfig({
  sass: {
    includePaths: bourbon.includePaths
  }
});

If you aren't using Gulp, you can instead create a vue.config.js file in your root, and configure Bourbon like so:

var bourbon = require("node-bourbon");
module.exports = {
  sass: {
    includePaths: bourbon.includePaths
  }
}

By default Vueify automatically vendor-prefixes your styles using autoprefixer, so there's no need to configure that additionally. Nice!

As I do not use Webpack, I'm not sure what the steps are to get this working with it, but if any knows, and would like to chime in, please leave a comment below!

Other questions or comments? Leave a comment below, or hit up my twitter, @syropian.

comments powered by Disqus