Bourbon Saas Use Bourbon (Sass) in a Vue CLI Project

First, ensure Sass is installed as a dev dependency (if you didn't select Sass while creating the project with the CLI):

npm install -D sass-loader sass

Install bourbon and bourbon-neat:

npm install -D bourbon bourbon-neat

Configure css.loaderOptions.sass.includePaths to use the correct paths:

//vue.config.js

const bourbon = require('bourbon');
const neat = require('bourbon-neat');

const bourbonPaths = [...bourbon.includePaths, ...neat.includePaths];

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: bourbonPaths,
      },
    },
  },
};

Import bourbon and neat (I did this in src/scss/site.scss):

@import '_bourbon'; // leading underscore required*
@import 'neat';

Import site.css in your App:

<template>
  ...
</template>

<style lang="scss">
@import '~@/scss/site';

body {
  background-color: tint(black, 80%); // use a bourbon function
}
.my-container {
  @include grid-container; // use a neat grid
}
</style>

* I don't use Sass enough to understand why the leading underscore is needed. Without it there's a compilation error as it tries to load the bourbon package's main Javascript file instead of the CSS. Any insight would be appreciated.