javascript - 如何在 Vue 工作流程（Vanilla Bootstrap）中覆盖 Bootstrap 变量？

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

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

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

我使用的是香草引导程序而不是引导程序-vue 组件。

标签： javascriptvue.jswebpack

制作一个名为custom.scss. 进入node_modules/bootstrap/scss目录并从_variables.scss. 将这些粘贴到您的custom.scss.

在你style.scss导入custom.scss之前你的导入bootstrap.scss。

现在在你的main.jsimport@/assets/style.scss中。

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