How to set own colours such as $primary ?

Afraid to ask such a very newbew question… but: How to set my own theme colors, for example, I would like $primary = #121b38

Bootstrap suggests editing _custom.scss , but if I create one, it does not seem to work:

<script>
  import '@/assets/_custom.scss'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'

  import Vue from 'vue'
  import Navbar from '@/components/Navbar'
  Vue.component('navbar', Navbar)

  export default {
    name: 'app'
  }
</script>

And in src/assets/_custom.scss

$blue:    #121b38 !default;

There must be something basic like this in the documentation, but I only see Color variants… maybe I need more sleep? ))

[mosinve]

It’s a common thing in bootstrap, and it documented as I know. So there isn’t need to add this into our project documentation.

[tvld]

Indeed that worked, thank you. Still, wondering why nobody wrote anything in the documentation:

---

To use your own theme and colors in bootstrap-vue, you can include this in your App.vue:

<style lang="scss">

  @import "assets/_custom.scss";
  @import "~bootstrap/scss/bootstrap.scss";
  @import '~bootstrap-vue/dist/bootstrap-vue.css';

  body {
    margin: 0;
  }
 // ...
</style>

The possible contents for this _custom.scss you will find in node_modules/bootstrap/scss/_variables.scss. Do not forget to apply npm install --save-dev node-sass sass-loader to use scss in Vue.