如何将 bootstrap-vue 图标包含到 nuxtjs 中?导航栏向下箭头的问题

Posted

技术标签:

【中文标题】如何将 bootstrap-vue 图标包含到 nuxtjs 中?导航栏向下箭头的问题【英文标题】:How to include bootstrap-vue icons into nuxtjs? Problem with navbar down arrows 【发布时间】:2020-07-17 15:04:18 【问题描述】:

编辑:嗯,可能会有样式覆盖 - 我可以从下面的下拉列表中工作。并将其粘贴到导航区域,向下箭头消失。 “lang”下拉菜单也可以这样说,如果我将它移到正文,箭头就会出现..

编辑:FML - 这是另一个导航栏样式覆盖,使用范围 LOL

导航栏 svg 向下箭头不会显示。大多数其他图标都可以正常工作..下面的代码几乎是为引导 vue 示例复制和粘贴的..

<b-navbar toggleable="lg" type="dark" >
    <b-navbar-brand href="#"><img src="" class="d-inline-block align-top"  ></b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#"></b-nav-item>
        <b-nav-item href="#">Home</b-nav-item>
        <b-nav-item href="#">Contact Us</b-nav-item>
        <b-nav-item href="#">FAQ</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown  text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>Welcome, Friend</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

有些图标可以正常工作,有些则不能。不会抛出任何错误。

文档说默认情况下没有安装它们...所以我安装了它们https://icons.getbootstrap.com/#installhttps://bootstrap-vue.js.org/docs/icons/

npm i bootstrap-icons

我创建了一个包含 nuxt.config.js 的插件。 所有元素似乎都正常工作,但图标..

 plugins: [
  '@/plugins/bootstrap-vue.js'
  ,'@/plugins/mixins/user.js'
],

/plugins/bootstrap.vue.js 下面

import Vue from 'vue'
import  BootstrapVue, BootstrapVueIcons  from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

我也尝试将它们具体包括在内

import BootstrapVue,BIconArrowUp, BIconArrowDown  from 'bootstrap-vue'
Vue.use(BootstrapVue)
import  BootstrapVueIcons  from 'bootstrap-vue'
Vue.use(BootstrapVueIcons)[![enter image description here][1]][1]
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

1) 我在 node_modules/bootstrap 文件夹中看不到任何与图标相关的内容。 2) 我确实在 node_modules/bootstrap-vue 文件夹中看到了 bootstrap.vue-icon.*。它包含 -icons.common.js、-icons.css。

我还尝试将图标直接添加到元素中,例如..

<b-nav-item-dropdown icon="circle-fill" text="Lang" right>

这是来自 bootstrap-vue 网站的片段,其中向下箭头图标显示正确。最底部的照片是我的项目的片段,缺少箭头..

在这里,我将其他一些 &lt;b&gt; 组件添加到我的项目中,以查看图标、箭头是否正常工作。他们确实...... 但是对于 b-navbar-dropdown .... 它们不起作用!

建议?

【问题讨论】:

您使用的是哪个版本的 BootstrapVue?您不需要添加 bootstrap-icons 作为依赖项。 BootstrapVue 的图标是在发布到 NPM 之前从 bootstrap-icons 的源代码构建的(因为它们是作为组件创建的)。 BootstrapVue v2.2.0版本新增图标,BootstrapVue v2.8.0新增图标 另请注意,下拉插入符号不是图标。它是由 Bootstrap v4.x 的 CSS/SCSS 作为伪 ::after 元素通过 CSS 创建的。 BootstrapVue 是最新的 v2.10.1,而 bootstrap v4.4.1,很奇怪,一定是发生了什么。因为在我的插件中添加 Vue.use(BootstrapVueIcons) 之前,所有 都不起作用 【参考方案1】:

根据official docs,BootstrapVue 默认不安装图标插件。

要在 Nuxt 中启用此功能,请编辑您的 nuxt.config.js,在 modules 数组中找到 'bootstrap-vue/nuxt' 模块并将其更改为:

modules: [
  'bootstrap-vue/nuxt',

  // ...other modules
]

对此,使用内联配置:

modules: [
  'bootstrap-vue/nuxt', 
    icons: true
  
]

或者如果你想要单独的模块配置,这个:

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: 
  icons: true

【讨论】:

【参考方案2】:

Soviut 大部分是正确的,但内联配置选项将不起作用,但会引发 Nuxt 致命错误。它只需要模块数组中的字符串。这个解决方案确实有效,但它只是为 bootstrapVue 创建一个指定图标的对象:true:

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: 
  icons: true

【讨论】:

【参考方案3】:

如果您希望减少生产包大小,我建议您导入特定图标。

module.exports = 
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: 
    components: ['BIcon', 'BIconAlertFill', 'BIconCalendar', 'BIconGears']
   
 

【讨论】:

【参考方案4】:

我们可以像这样导入 BootstrapVueIcons: 首先,编辑 bootstrap-vue.js 文件

my nuxtjs project 其次,在这个文件中添加这个内容

import Vue from 'vue';

import  BootstrapVue ,BootstrapVueIcons from 'bootstrap-vue';

Vue.use(BootstrapVue, );

Vue.use(BootstrapVueIcons, )
那么你会得到它。

【讨论】:

.nuxt 文件夹不打算签入到版本控制中。因此,此处所做的任何更改都不是永久性的。【参考方案5】:

有关如何在 nuxt.js 中使用引导图标的说明,请参阅官方文档 https://bootstrap-vue.org/docs#icons

【讨论】:

仅链接的答案在 SO 上不被视为有价值。

以上是关于如何将 bootstrap-vue 图标包含到 nuxtjs 中?导航栏向下箭头的问题的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap-vue 将 svg 图像显示为导航项?

如何将 SASS 文件添加到 bootstrap-vue/webpack(vue-cli 项目)?

使用 bootstrap-vue:如何将类添加到 b 分页组件中的页面按钮

我可以在 bootstrap-vue 项目中安全地包含 bootstrap.js 吗?

Laravel Mix 中的 Bootstrap-Vue CSS 编译

如何使用 npm 在 vue.js 中包含 bootstrap-vue?