VueJS 仅从引导程序导入使用的样式

Question

我正在使用 npm bootstrap 并仅导入我在 custom.scss 中用于我的项目的类

@import '~bootstrap/scss/functions.scss';
@import '~bootstrap/scss/variables.scss';
@import "~bootstrap/scss/mixins";
@import '~bootstrap/scss/transitions.scss';
@import '~bootstrap/scss/nav.scss';
@import '~bootstrap/scss/navbar.scss';
@import '~bootstrap/scss/buttons.scss';
@import '~bootstrap/scss/forms.scss';
@import '~bootstrap/scss/images.scss';
@import '~bootstrap/scss/bootstrap-grid.scss';
@import '~bootstrap/scss/type.scss';
@import '~bootstrap/scss/media.scss';
@import "~bootstrap/scss/dropdown.scss";
@import "~bootstrap/scss/reboot.scss";

@import "~bootstrap/scss/utilities/spacing.scss";
@import "~bootstrap/scss/utilities/text.scss";
@import "~bootstrap/scss/utilities/background.scss";
@import "~bootstrap/scss/utilities/position.scss";
@import "~bootstrap/scss/utilities/sizing.scss";
@import "~bootstrap/scss/utilities/spacing.scss";
@import "~bootstrap/scss/utilities/borders.scss";
@import "~bootstrap/scss/utilities/float.scss";

@import "~bootstrap/scss/mixins/transition.scss";

但是导航栏折叠不再起作用。我需要导入的丢失文件是什么？任何帮助将不胜感激

编辑： 添加了所有引导程序，但仍然无法正常工作

@import '~bootstrap/scss/bootstrap.scss';

Answer 1

编辑

Bootstrap JS 文件夹位于这样的目录中。您将使用@import 语句在您的 scss 文件中使用它。

bootstrap/
└── dist/
    ├── scss/
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

另外，请确保您也安装了 jQuery 和 Popper，因为它们是对等依赖项。

npm install --save jquery popper.js.