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.
Top comments (0)