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

Posted 2023-02-22

【中文标题】将 bootstrap.css 包含到 nuxt 项目的最佳方法是啥？

【英文标题】：What is best way for including bootstrap.css to nuxt project?将 bootstrap.css 包含到 nuxt 项目的最佳方法是什么？

【发布时间】：2018-06-06 16:28:33

【问题描述】：

这是我的 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'，然后从这里加载？

【参考方案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',
  ],

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

【参考方案2】：

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

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

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

然后在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']

【讨论】：

@import "bootstrap-variable-override";为我抛出了一个错误。删除，它就像一个魅力

【参考方案3】：

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

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

安装

npm install bootstrap@next

注意：命令会改变，目前bootstrap 5是beta版。

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

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

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

添加Bootstrap的CSS部分和自定义的Bootstrap

首先，在 nuxt 项目的 assets 文件夹中创建一个文件夹，并在创建的文件夹中创建一个 scss 文件。假设文件夹的名称是 bootstrap，文件名是‘mystyle.scss’。现在，在这个 mystyle.scss 文件中，您可以覆盖任何内置的自定义 Bootstrap 变量。

但是你还需要在这个mystyle.scss中导入bootstrap样式。之后，你需要下面一行来导入bootstrap样式

@import "~bootstrap/scss/bootstrap";

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

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

export default 

 css: [  src: '~/assets/bootstrap/mystyle.scss', lang: 'sass' 
  ],
  
 

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

添加 Bootstrap 的 javascript 部分

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

export default 
      
    script: [
      
        src: '/bootstrap.bundle.min.js',
      
    ]
  

就是这样，享受吧！

您可以在我的中篇文章click here 中详细了解它。

【参考方案4】：

这是我发现在 Nuxt.js 项目中包含 常规 Bootstrap 版本（not 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 只能在客户端上运行。这可以防止由于 Bootstrap 与服务器端渲染不兼容而发生 ReferenceError: document is not defined 错误。

【参考方案5】：

就我而言，我将 bootstrap.css 文件放在“static”文件夹中，然后将其注册到 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 
]

,

【参考方案6】：

这是我的设置，适合那些喜欢自定义引导默认样式的人：

在我的assets/styles/_bootstrap.scss 中，我已经导入了所需的样式：

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
//@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
//@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
//@import "~bootstrap/scss/dropdown";
//@import "~bootstrap/scss/button-group";
//@import "~bootstrap/scss/input-group";
//@import "~bootstrap/scss/custom-forms";
//@import "~bootstrap/scss/nav";
//@import "~bootstrap/scss/navbar";
//@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination";
//@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
//@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
//@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";
//@import "~bootstrap/scss/print";

以防万一您想更改引导程序的默认样式，然后我创建了assets/styles/_bootstrap-variables.scss：

你可以在node-modules/bootstrap/scss/variables.scss中找到很多变量，我只是改变了一些。

@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,700');

$font-family-cabin: 'Cabin', sans-serif;
$font-family-base:  $font-family-cabin;

$primary:       #b62f20;
$secondary:     #e8e8e9;
$success:       #87b4a6;
$info:          #f0f6fc;
//$warning:       #faeecf;
//$danger:        $red !default;
//$light:         $gray-100 !default;
//$dark:          $gray-800 !default;

并将我所有其他样式和插件导入一个文件assets/styles/main.scss：

@import "bootstrap-variables"; // this should alway be on top
@import "bootstrap";
@import "my-other-style";

最后，将样式表导入layouts/default.vue

<template lang="pug">
  div
    nuxt
</template>

<style lang="scss">
  @import '../assets/styles/main';
</style>

【参考方案7】：

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

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

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

【讨论】：

我应该把这一行放在我的代码的什么地方？当我将它粘贴到 nuxt.config.js 或 pages/index.vue 时，我收到错误“语法错误：意外令牌（3:0）”它的符号 '@' 如果我从行首删除 '@' 我得到另一个错误“未找到此相关模块：”

粘贴到 assets/main.css

我按照你说的做了，但它对我不起作用。详情见问题更新。谢谢！

@MikaS，我更新了我的问题，并在此帖子评论之后。但现在我没有看到我的问题更新。版主可能会删除它吗？

@tolyan 您尝试编辑此答案，而不是您自己的问题。修改未获批准，这就是您看不到它的原因。

【参考方案8】：

在我的例子中，我将它作为对象条目从 CDN 添加到 link 数组（在 nuxt.config.js 中）

link: [     
    rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
]

【参考方案9】：

你安装 bootstrap-vue ：

yarn add bootstrap-vue

然后在 nuxt.config.js 文件中添加一个模块，以及用于导入图标的单独配置：

modules: ['bootstrap-vue/nuxt'],
 bootstrapVue: 
   icons: true // Install the IconsPlugin (in addition to BootStrapVue plugin
 

就是这样。 有关更多配置，请阅读此处的文档：https://bootstrap-vue.org/docs （读到它处理nuxt的中间）

【参考方案10】：

我用于 Bootstrap v5

nuxt.config.js

  css: [
    '~/assets/scss/main.scss',
  ],
  styleResources: 
    scss: [
      '~/node_modules/bootstrap/scss/_functions.scss',
      '~/node_modules/bootstrap/scss/_variables.scss',
      '~/node_modules/bootstrap/scss/_mixins.scss',
      '~/node_modules/bootstrap/scss/_containers.scss',
      '~/node_modules/bootstrap/scss/_grid.scss'
    ]
  ,
  modules: [
    '@nuxtjs/style-resources',
  ],

@nuxtjs/style-resources 在组件中提供 mixins、变量、网格： https://www.npmjs.com/package/@nuxtjs/style-resources 示例：

<style scoped lang="scss">
.header 
  @include make-container();


</style>

main.scss

@import "bootstrap-configuration";
@import "bootstrap-optional";
@import "@/node_modules/bootstrap/scss/helpers";
@import "@/node_modules/bootstrap/scss/utilities/api";
@import "custom";

_bootstrap-configuration.scss

@import "bootstrap-required";
@import "@/node_modules/bootstrap/scss/utilities";

_bootstrap-optional.scss （我只能包含我想要的内容）

@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";

_custom.scss （这里我放了一些变量来覆盖 Bootstrap 和组件的自定义 css）

$theme-colors: (
  "red": #cf142b,
  "black": #000,
  "tan": #e0d9c7,
  "blue": #009eba,
  "blue-light": #d6e3e6,
  "blue-dark": #006985,
  "red-dark": #7d212b,
);

@import
'mixins/mixins';

@import
'_base/colors',
'_base/typography',
'_base/headings';

@import
  'components/_page-header',
  'components/text-editor',
  'components/content-with-side-image',
  'components/featured-artists',
  'components/video-player',
  'components/audio-player',
  'components/call-to-action',
  'components/divider',
  'components/tabs',
  'components/image-gallery',
  'components/logos',
  'components/button',
  'components/page-submenu',
  'components/page-submenu-target';

我的想法来自 https://v5.getbootstrap.com/docs/5.0/customize/optimize/