Guide to customizing Bootstrap framework inside Vue-CLI project

A simple step-by-step tutorial to setup SASS and customize the framework.

// Make sure the functions come before custom variables 
@import "../node_modules/bootstrap/scss/functions";
// Our custom variables file
@import "./variables";
// The bootstrap file that compiles the CSS
@import "../node_modules/bootstrap/scss/bootstrap";

Inside app.vue We call the custom-bootstrap.scss file we created before.

// app.vue 
<style lang="scss">
@import "./scss/custom-bootstrap";

This will compile our bootstrap file when we build or serve the app.

Accessing variables across the components We may need colour variables inside our components. We can manually call functions and variables file.

// Manually accessing 
<style lang="scss">
@import "../node_modules/bootstrap/scss/functions";
@import "./scss/variables";
#some-element {
   background-color: $blue;

Or we can globally register the dependencies: create vue.config.js in the root directory and add the following

// vue.config.js
module.exports = {
 css: {
  loaderOptions: {
   sass: {
    data: `
     @import "./node_modules/bootstrap/scss/_functions.scss";
     @import "@/scss/_variables.scss";

Do npm run serve