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

小宇宙猪猪2020-03-23

这是我的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'
   ],

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

从CDN加载该bootstrap.css文件之后，该文件未包含在html文件中。因此，我认为这不是一个很好的主意。

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

head: { title: "Nuxt", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", content: "Nuxt" } ], link: [ { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, { rel: "stylesheet", href: "/css/bootstrap.css" } //Register your static asset ]