Skip to content

Override bootstrap variables #4

@AlexZd

Description

@AlexZd

Hi, I'm using your plugin to add bootstrap to my project, but I have an issue with overriding of variables.
After adding your plugin it adds a line to main.js

import "./plugins/bootstrap-vue";

But as mentioned here: https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults I need to add variables before adding bootstrap. I followed instructions from url and created _custom.scss file with following content:

$body-bg: #f00;
$font-size-base: 2rem;
@import "node_modules/bootstrap/scss/bootstrap";

and replaced import of your plugin with:

import "../scss/_custom.scss";

This is working fine, but as you can see there is no import of your plugin anymore, hence this is not used:

import Vue from "vue";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);

I believe this can impact something and I want to keep proper way of plugin importing. How I can do this in a proper way?

As far as I understood it happens because you are importing .css directly, in that way it will be not possible to override.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions