Question

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

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

如何在 nuxt 项目中访问和更改 bootstrap css 文件？

任何人都有任何分享的例子吗？

Answer 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';

Answer 2

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

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

请参阅主题为https://bootstrap-vue.js.org/docs/reference/theming的文档

在Nuxt项目中自定义boostrap-vue

2 个答案: