我有一个当前的 VueJS 项目，在尝试添加引导模式时，我遇到了导入引导 scss 会破坏/覆盖项目 css 的问题。 如何在不覆盖当前 css 的情况下包含 Bootstrap css？
我正在将引导程序导入我的应用程序.js文件的顶部
import Vue from 'vue';
import { BootstrapVue } from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
导入
bootstrap.min.css导入所有引导程序样式，因此它将覆盖项目中的任何现有样式。在您的情况下，您只需要一个模块(模态(的样式，而不是整个库。
最简单的方法是仅导入所需的文件，在这种情况下，这将是模式文件，而不是整个库 https://getbootstrap.com/docs/4.4/getting-started/theming/#importing
刚刚完成了这个，所以我可以提供 bootstrap-vue v.2.5.0 的特定代码。这是来自文档，但如前所述，需要一点挖掘才能发现所有路径的位置，因此我将它们全部包含在此处。
创建一个 _custom.scss 文件(我把我的放在 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";
如您所见，我注释掉了我没有使用的内容。然后简单地：
// in main.js:
import "./assets/_custom.scss";
不要忘记在 Vue 中包含 node-sass 和 sass-loader 来使用 scss：
npm install --save-dev node-sass sass-loader
注意：您可能需要根据构建环境调整 SCSS 导入路径。