在 Nuxt 项目中自定义 bootstrap-vue

Posted 2023-02-22

【中文标题】在 Nuxt 项目中自定义 bootstrap-vue

【英文标题】：Customize boostrap-vue in a Nuxt project

【发布时间】：2018-10-25 14:33:08

【问题描述】：

我有一个 nuxt 项目，我在其中使用 bootstrap-vue 作为模块来设置组件样式。

我对默认样式不满意，我想添加一些自定义，更准确地说，我想更改 导航栏 的外观并添加一些动画到切换按钮。

我应该如何访问和更改我的 nuxt 项目中的 bootstrap css 文件？

谁有例子可以分享？

【问题讨论】：

最好的办法是创建css来覆盖bootstrap。

有什么方法可以访问 bootstrap-vue css 文件，以便直接更改 css 属性？

你想直接改谁？根据经验，由于副作用，这会带来很多麻烦。

我假设多个代码会一团糟，但你是对的，最好的方法是创建 css 来覆盖引导程序。

只需创建名称为 bootstrap-custom 和 @import 的 CSS ;) 简单而更好

【参考方案1】：

首先你应该把你的 nuxt.config.js 改成

  bootstrapVue: 
    bootstrapCSS: false,
    bootstrapVueCSS: false
+  ,

并添加

css: ['~/assets/styles/bootstrap-custom.scss']

给它

之后在 bootstrap-custom.scss 中定义你在 bootstap css 之上的样式，如下所示：

@import "base/vars";

$primary:       $fc-blue ;
$secondary:     #ffffff ;
$light:         #f1f1f1 ;
$dark:          $fc-black-gray ;

//then bootstrap & bootstrap-vue should be added after
//so that they inherit the custom SCSS variables
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

【参考方案2】：

由 bootstrap V4.3 SCSS 控制的许多样式可以通过设置 SCSS 变量然后编译 Bootstrap + BootstrapVue SCSS 来修改（主题化）。

如上面的 cmets 所述，您还可以创建自定义样式/类并将这些类应用到您想要更改的组件。

查看主题文档https://bootstrap-vue.js.org/docs/reference/theming