javascript - 将 bootstrap.css 包含到 nuxt 项目的最佳方法是什么？

Question

这是我的 nuxt.config.js 文件的一部分:

 head: {

 link: [
     { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       // load bootsttrap.css from CDN      
       //{ type: 'text/css', rel: 'stylesheet', href: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' },
     ]
   },
   css: [
     // this line include bootstrap.css in each html file on generate 
     'bootstrap/dist/css/bootstrap.css',
     'assets/main.css'
   ],

在这种情况下，bootstrap.css 包含在 nuxt generate 上的每个 html 文件中。为了解决这个问题，我在 css 部分注释行 'bootstrap/dist/css/bootstrap.css' 并在链接部分取消注释 rel stylesheet 行。

此 bootstrap.css 文件从 CDN 加载后，不包含在 html 文件中。所以，我认为这不是一个好主意。

如何在构建时将 bootstrap.css 从“node_modules/bootstrap/dist/...”复制到“~/assets”，然后从此处加载它？

Answer 1

将 bootstrap.css 包含到 nuxt 项目中的步骤:

1.安装bootstrap-vue

 npm i bootstrap-vue

2.创建文件 plugins/bootstrap-vue.js 并在其中输入:

/* eslint-disable import/first */
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

3.将创建的插件添加到nuxt.config.js:

 plugins: [
    '@/plugins/bootstrap-vue',
  ],

完成这些步骤后它应该可以工作，您可以使用 bootstrap。