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

JavaScript Vue.js

小宇宙猪猪

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”，然后从此处加载它？

第2784篇《将bootstrap.css包含到nuxt项目中的最佳方法是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
Stafan路易 2020.03.23

就我而言，我将bootstrap.css文件放在“静态”文件夹中，然后将其注册到nuxt.config.js中，如下所示

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 
]

}，

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android