DEV Community

Taylor Beseda
Taylor Beseda

Posted on

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

#vue #saas #bourbon #neat

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, }, }, }, };
Enter fullscreen mode Exit fullscreen mode

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

@import '_bourbon'; // leading underscore required* @import 'neat';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

* 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.

Top comments (0)