Importing Bootstrap css in app.js breaks current styles vuejs

Question

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';

The easiest way would be to only import the files you need, which in this case would be modal, instead of the entire library getbootstrap.com/docs/4.4/getting-started/theming/#importing — Chase DeAnda
– Chase DeAnda, Commented Jan 31, 2020 at 22:28
@chaseDeAnda that worked like a charm, I'll accept that as an answer if you want to make it one. Thanks — Shawn
– Shawn, Commented Jan 31, 2020 at 23:12
Bootstrap CSS is a CSS Framework, which sets defaults for how the page and certain elements will be styled, which most likely will conflict with with other CSS frameworks/styles. — Troy Morehouse
– Troy Morehouse, Commented Feb 1, 2020 at 22:30

Chase DeAnda · Accepted Answer · 2020-02-03 16:58:23Z

2

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

answered Feb 3, 2020 at 16:58

Chase DeAnda

16.5k3 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jewcub · Accepted Answer · 2020-02-19 12:54:54Z

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.

Collectives™ on Stack Overflow

Importing Bootstrap css in app.js breaks current styles vuejs

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related