如何在 Vue 工作流程( Vanilla Bootstrap )中覆盖 Bootstrap 变量?

Kau*_*oty 4 javascript webpack vue.js

官方推荐的自定义/主题引导程序的方法是使用 sass 覆盖引导程序变量。但我该如何做到这一点,或者更确切地说,如何将这部分流程添加到 Vue webpack 工作流程中?

谷歌搜索导致尝试编辑vue.config.js文件以将 scss 加载器添加到 webpack 中,但我无法找到所需的文件。

这是目录结构

我使用 vue-cli v3.4 来设置项目。

我使用的是 vanilla bootstrap 而不是 bootstrap-vue 组件。

Ohg*_*why 8

制作一个名为custom.scss. 进入node_modules/bootstrap/scss目录并复制 中的所有内容_variables.scss。将这些粘贴到您的custom.scss.

在style.scss导入custom.scss之前导入bootstrap.scss.

现在在您的main.js导入中@/assets/style.scss。

您还需要从!default您希望覆盖的任何变量中删除该标志custom.scss,以使它们生效。