自定义Nuxt项目中的Nuxt vue

Question

我有一个nuxt项目，在该项目中，我使用引导-vue作为模块来对组件进行样式化。

我对默认样式不满意，我想添加一些定制，更准确地说，我想改变导航条的外观，并在切换按钮中添加一些动画。

如何访问和更改我的nuxt项目中的引导css文件？

有人有什么可供分享的例子吗？

Answer 1

首先，您应该将nuxt.config.js更改为

  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
+  },

再加上

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

对它来说

之后，在引导-定制.this中，在引导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

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

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

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