Need a better documentation of "How to override variables in bootstrap"?

using ttps://github.com/bootstrap-vue/webpack sample generated

added the following `<template>

<div class="appmenu"> <b-navbar toggleable="md" type="dark" variant="primary">

<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

<b-navbar-brand href="/index">Home</b-navbar-brand>

<b-collapse is-nav id="nav_collapse">

  <b-navbar-nav>
    <b-nav-item href="/appwizard">Register Application in Azure AD </b-nav-item>
  </b-navbar-nav>

  <!-- Right aligned nav items -->
  <b-navbar-nav class="ml-auto">
    <b-nav-item-dropdown right>
      <!-- Using button-content slot -->
      <template slot="button-content">
        <em>User</em>
      </template>
      <b-dropdown-item href="#">Signout</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-navbar-nav>

</b-collapse>

</b-navbar> <span class="red">{{ menumsg }}</span> junk </div> </template> <style> bg-primary { background-color: #3f3f3f!important; } </style>

` works but not

`

<style> .bg-primary { background-color: #3f3f3f; } </style>

`

How to do this without !important

how to override primary such that all values of $primary in bootstrap are replaced since bootstrap-vue recommends to use css files and components and variant components

Also, Need a better documentation with example of how to override variants than explained here: https://bootstrap-vue.js.org/docs/reference/color-variants/

[robcresswell]

Can you fix the highlighting in your issue post? It’s quite hard to read.

In terms of theming, the easiest thing to do is import your variables globally in webpack. For me this looks like

rules: [
  {
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
      loaders: {
        scss: "vue-style-loader!css-loader!sass-loader?data=@import './src/scss/variables.scss';",
        preserveWhitespace: false
      }
    }
  }
  ...
]

And then variables.scss contains all of my custom variables or variable overrides, then imports the bootstrap variables after. This means it uses my variables and then defaults to bootstrap for the rest. This also means that these variables are available in all of my components <style> blocks.

[SimonFricker]

+1