search

GregYankovoy / vue-cli-plugin-bootstrap-vue

vue-cli 3 plugin to add bootstrap-vue
MIT License
34 stars 2 forks source link

Override bootstrap variables #4

Open AlexZd opened 5 years ago

AlexZd commented 5 years ago

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.

GregYankovoy commented 5 years ago

Let me take a closer look at this and get back to you. Your custom scss situation makes sense, and we'll probably want to offer the option at the initial plugin prompt.