在 Nuxt 项目中自定义 bootstrap-vue

Question

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

我对默认样式不满意，我想添加一点自定义，更准确地说，我想更改 navbar 它的外观和为切换按钮添加一些动画。

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

谁有任何例子可以分享？

Answer 1

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

如上面的评论所述，您还可以创建自定义 styles/classes 并将这些类应用到您要更改的组件。

在 https://bootstrap-vue.js.org/docs/reference/theming

查看主题文档

Answer 2

首先你应该把你的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';

在 Nuxt 项目中自定义 bootstrap-vue

Customize boostrap-vue in a Nuxt project

css

vue.js

bootstrap-4

nuxt.js