What are the Steps to Using Custom Bootstrap SASS in a Vue CLI 3 Project?

user_5849650 0
Viewed 3104

I'm trying to change the 'primary', 'danger', 'info', etc theme colors in my project. I use bootstrap-vue. I've tried changing the variables.sass file in the bootstrap folder in node_modules but nothing is reflected. I took a look at the documentation for theming but I can't seem to make sense of it, or get an idea of what I should be doing. Their example looks nothing like the scaffolded project for CLI 4. Should I be creating a custom sass file, installing a sass loader, and importing it?

main.js 

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './assets/main.css';
import routes from './routes';


Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(BootstrapVue);

const router = new VueRouter({mode: 'history',routes});

new Vue({
  router,
  render: h => h(App)

}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
@import 'assets/main.css';
@import 'assets/custom_scss.scss';
</style>
bootstrap-vue vue-cli vue.js
1 Answers

If you've created your project with vue-cli 3/4 you can do the following. Create a custom.scss file and import the bootstrap and bootstrap-vue stylings in there, and customize the variables before the import.

Then import custom.scss in your main.js file along with bootstrap-vue

custom.scss

$theme-colors: (
  "primary": black,
  "danger": blue
);

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

main.js

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";

import "../assets/scss/custom.scss";
Vue.use(BootstrapVue);

new Vue({
  render: h => h(App)
}).$mount("#app");

Another note is that you should never customize any code inside node_modules as these files should be able to be deleted and re downloaded again without breaking anything.

user_83979740
Related