如何覆盖 Vue 工作流程中的 Bootstrap 变量(Vanilla Bootstrap)? [英] How to override Bootstrap variables in Vue workflow ( Vanilla Bootstrap )?

问题描述

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

The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?

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

Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.

这是目录结构

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

I have used vue-cli v3.4 to setup the project.

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

I am using vanilla bootstrap and not the bootstrap-vue components.

推荐答案

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

Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.

在您导入 bootstrap.scss 之前，在您的 style.scss 中导入您的 custom.scss.

In your style.scss import your custom.scss before you import bootstrap.scss.

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

Now in your main.js import @/assets/style.scss.

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

You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.

这篇关于如何覆盖 Vue 工作流程中的 Bootstrap 变量(Vanilla Bootstrap)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！