nuxt中,bootstrapVue自定义样式使用

1. 安装: npm i -S bootstrap-vue/nuxt

2. 配置nuxt.config

  modules: ["bootstrap-vue/nuxt"],
  css: ["@/assets/style/customBootStrap.scss"],  //全局bootstrap样式
  bootstrapVue: {
    //引入icon
    icons: true,
    // 自定义样式,以下两属性设置false
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },

3. 重写样式:

• 先写用于覆盖bootstrap中的定义变量,最后需要重新引入样式依赖,
• node_modules\bootstrap\scss\_variables.scss 或node_modules\bootstrap-vue\src\_variables.scss中寻找自己需要的变量

assets/style/customBootStrap.scss

//此处为自定义的scss变量

//导航navbar的padding
$navbar-padding-y: 0;
$navbar-padding-x: 0;
//导航logo的padding
$navbar-brand-padding-y: 0;
//导航每一个item的padding
$nav-link-padding-y: 0;
//导航每一个item的margin
$navbar-nav-link-padding-x: 26px;
//alert margin
$alert-margin-bottom: 0;



//最后需要重新引入样式依赖
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
@import "../../node_modules/bootstrap-vue/src/index.scss";

vue-bootstrap文档参考