将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'
   ],

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

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

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

Answer 1

这是我发现的在 Nuxt.js 项目中包含常规Bootstrap 版本（不是Bootstrap-Vue）的最简单方法。首先，从 Nuxt.js 项目目录安装 Bootstrap（我使用的是版本 5.0.0-beta2）：

npm install bootstrap

然后，在nuxt.config.js文件中包含 Bootstrap 的 CSS 和 Javascript，如下所示：

css: [
    "~/node_modules/bootstrap/dist/css/bootstrap.min.css"
],
plugins: [
    { src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", mode: "client" }
],

请注意mode: "client"指示 Javascript 只能在客户端上运行的标志。这可以防止ReferenceError: document is not defined由于 Bootstrap 与服务器端渲染不兼容而发生的错误。

Answer 2

将 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',
  ],

在这些步骤之后，它应该可以工作，您可以使用引导程序。

Answer 3

如果您使用 scss，对我来说最好的方法

至于我，我在 nuxt 的目录中创建了一个sass目录assets。

然后我app.scss在sass刚刚创建的目录中添加文件。

然后在里面app.scss我导入以下内容： @import "bootstrap-variable-override"; @import "~bootstrap/scss/bootstrap.scss";

然后我做 yarn add node-sass sass-loader --save

在那之后，nuxt.config.js我修改了 css 数组以包含我的app.scss

  css: [
    '@/assets/sass/app.scss'
  ],

这将编译我将在app.scss 中编写和导入的任何 scss，并作为已编译的 css 提供。

但是如果你是 bootstrap-vue 那么你需要做的就是将它添加为模块：

  modules: ['bootstrap-vue/nuxt']

Answer 4

使用 nuxt.js 添加 Bootstrap 5 的方法：

\n

\n

如果您不想通过阅读以下答案来手动执行此操作，您可以简单地使用 nuxt 样板存储库克隆我的 bootstrap 5，请单击此处。

\n

\n

安装

\n

npm install bootstrap@next\n

\n

\n

注意：命令会改变，目前bootstrap 5处于测试版本。

\n

\n

安装完bootstrap之后，你就会知道需要安装一些loader来编译Bootstrap。

\n

npm install --save-dev sass sass-loader fibers postcss postcss-loader autoprefixer \n\n

\n

\n

注意：bootstrap 文档中没有提到 Fiber 的安装，但安装 Fiber 时会自动启用 sass 同步编译（速度提升 2 倍）。

\n

\n

添加Bootstrap的CSS部分以及自定义Bootstrap

\n

首先，在 nuxt 项目\xe2\x80\x99sassests 文件夹中创建一个文件夹，并在创建的文件夹中创建一个 scss 文件。假设文件夹\xe2\x80\x99s名称为bootstrap，文件名为\xe2\x80\x98mystyle.scss\xe2\x80\x99。现在，在此 mystyle.scss 文件上，您可以覆盖任何内置的自定义 Bootstrap 变量。

\n

但是您也需要在 mystyle.scss 中导入引导样式。之后，您需要以下行来导入引导样式

\n

@import "~bootstrap/scss/bootstrap";\n\n

\n

\n

注意：请确保将其导入到 .scss 文件的最后一行。

\n

\n

导入bootstrap样式后，需要编辑nuxt.config.js

\n

export default {\n\n css: [ { src: \'~/assets/bootstrap/mystyle.scss\', lang: \'sass\'} \n  ],\n  \n }\n\n

\n

这不仅会编译覆盖的引导样式，还会在整个 nuxt 项目中添加引导样式。

\n

添加 Bootstrap 的 Javascript 部分

\n

首先，下载引导程序。您将在下载的文件夹中获得一个 css 和一个 js 文件夹。这两个文件夹下有很多文件。\n我们只需要 js 文件夹中的一个文件。该文件的名称是bootstrap.bundle.min.js。复制该“bootstrap.bundle.min.js”文件并将该文件粘贴到 nuxt 项目的静态文件夹中。然后你需要编辑 nuxt.config.js 才能使用它。

\n

export default {\n      \n    script: [\n      {\n        src: \'/bootstrap.bundle.min.js\',\n      }\n    ]\n  }\n\n

\n

就是这样，享受吧！

\n

您可以在我的媒体文章中详细了解它，请点击此处。

\n

Answer 5

如果您希望将 CSS 导入（特别是在您的情况下从 node_modules 引导）集中到单个文件中以供 Nuxt 生成，则可以将 at 规则导入包含到“assets/main.css”中（建议将其更新为'~/assets/main.css') 在您的配置中指定。

@import '../node_modules/bootstrap/dist/css/bootstrap.css'

提醒一下：当你在开发模式下运行 Nuxt 时，CSS 将通过 JS 注入。然而，生成后，Nuxt 将创建一个散列 CSS 文件作为文档根目录的一部分。