CODEWITHSUNDEEP
vue.jsbootstrap-vue
Shawn
Shawn

Reputation: 219

Importing Bootstrap css in app.js breaks current styles vuejs

I have a current VueJS project and in attempting to add a bootstrap modal I am running into an issue where importing the bootstrap scss breaks/overrides the css of the project. How can I include Bootstrap css without overriding my current css?

I'm importing bootstrap into the top of my app.js file

import Vue from 'vue';

import { BootstrapVue } from 'bootstrap-vue'
Vue.use(BootstrapVue)

import 'bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css';

Upvotes: 2

Views: 1721

Answers (2)

jewcub
jewcub

Reputation: 21

Just went through this so I can provide the specific code as of bootstrap-vue v.2.5.0. This is from the docs, but as mentioned, it will take a little digging to uncover where all the paths are so I've included them all here.

create a _custom.scss file (I put mine in src/assets/):

// required:
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/mixins";
// optional
@import "./node_modules/bootstrap/scss/root";
@import "./node_modules/bootstrap/scss/reboot";
// @import "./node_modules/bootstrap/scss/type";
@import "./node_modules/bootstrap/scss/images";
// @import "./node_modules/bootstrap/scss/code";
@import "./node_modules/bootstrap/scss/grid";
// @import "./node_modules/bootstrap/scss/tables";
@import "./node_modules/bootstrap/scss/forms";
@import "./node_modules/bootstrap/scss/buttons";
@import "./node_modules/bootstrap/scss/transitions";
@import "./node_modules/bootstrap/scss/dropdown";
@import "./node_modules/bootstrap/scss/button-group";
@import "./node_modules/bootstrap/scss/input-group";
// @import "./node_modules/bootstrap/scss/custom-forms";
@import "./node_modules/bootstrap/scss/nav";
@import "./node_modules/bootstrap/scss/navbar";
@import "./node_modules/bootstrap/scss/card";
// @import "./node_modules/bootstrap/scss/breadcrumb";
// @import "./node_modules/bootstrap/scss/pagination";
// @import "./node_modules/bootstrap/scss/badge";
// @import "./node_modules/bootstrap/scss/jumbotron";
@import "./node_modules/bootstrap/scss/alert";
// @import "./node_modules/bootstrap/scss/progress";
// @import "./node_modules/bootstrap/scss/media";
@import "./node_modules/bootstrap/scss/list-group";
// @import "./node_modules/bootstrap/scss/close";
// @import "./node_modules/bootstrap/scss/toasts";
// @import "./node_modules/bootstrap/scss/modal";
// @import "./node_modules/bootstrap/scss/tooltip";
// @import "./node_modules/bootstrap/scss/popover";
// @import "./node_modules/bootstrap/scss/carousel";
// @import "./node_modules/bootstrap/scss/spinners";
@import "./node_modules/bootstrap/scss/utilities";
// @import "./node_modules/bootstrap/scss/print";

@import './node_modules/bootstrap-vue/src/variables';
@import './node_modules/bootstrap-vue/src/utilities';
@import "./node_modules/bootstrap-vue/src/components/card/index";
@import "./node_modules/bootstrap-vue/src/components/dropdown/index";
// @import "./node_modules/bootstrap-vue/src/components/form-checkbox/index";
// @import "./node_modules/bootstrap-vue/src/components/form-file/index";
@import "./node_modules/bootstrap-vue/src/components/form-input/index";
// @import "./node_modules/bootstrap-vue/src/components/form-radio/index";
// @import "./node_modules/bootstrap-vue/src/components/form-tags/index";
@import "./node_modules/bootstrap-vue/src/components/input-group/index";
// @import "./node_modules/bootstrap-vue/src/components/modal/index";
@import "./node_modules/bootstrap-vue/src/components/nav/index";
@import "./node_modules/bootstrap-vue/src/components/navbar/index";
// @import "./node_modules/bootstrap-vue/src/components/pagination/index";
// @import "./node_modules/bootstrap-vue/src/components/pagination-nav/index";
// @import "./node_modules/bootstrap-vue/src/components/popover/index";
// @import "./node_modules/bootstrap-vue/src/components/table/index";
// @import "./node_modules/bootstrap-vue/src/components/toast/index";
// @import "./node_modules/bootstrap-vue/src/components/tooltip/index";

As you can see, I commented out what I wasn't using. Then simply:

// in main.js:
import "./assets/_custom.scss";

Do not forget to include node-sass and sass-loader to use scss in Vue:

npm install --save-dev node-sass sass-loader

Note: You may need to adjust the SCSS import paths based on your build environment.

Upvotes: 1

Chase DeAnda
Chase DeAnda

Reputation: 16441

Importing bootstrap.min.css imports ALL of bootstraps styles so it will override any existing styles in your project. In your case, you only want styles for one module (Modal) and not the entire library.

The easiest way would be to only import the files you need, which in this case would be modal, instead of the entire library https://getbootstrap.com/docs/4.4/getting-started/theming/#importing

Upvotes: 2

Related Questions