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

时间：2017-12-25 11:39:35

标签： javascript vue.js nuxt.js

这是我的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生成上的每个html文件中。 为了解决这个问题，我在css部分中注释＆＃39; bootstrap / dist / css / bootstrap.css＆＃39; ，并在链接部分取消注释 rel样式表行。

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

如何从“node_modules / bootstrap / dist /...&# 39”复制bootstrap.css;到＆＃39;〜/ assets＆＃39;在构建，然后，从这里加载它？

10 个答案:

答案 0 :(得分：3)

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

<块引用>

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

安装

npm install bootstrap@next
<块引用>

注意：命令会发生变化，目前 bootstrap 5 处于测试版。

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

npm install --save-dev sass sass-loader fibers postcss postcss-loader autoprefixer
<块引用>

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

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

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

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

@import "~bootstrap/scss/bootstrap";
<块引用>

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

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

export default {

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

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

添加 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 中详细了解它。

答案 1 :(得分：2)

我使用这种解决方案，就像一种魅力，并且我认为它是最好的解决方案，既方便又快捷，请按照以下步骤操作：

1。安装bootstrap-vue 

 npm i bootstrap-vue

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

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 / bootstrap-vue'，   ]，   ...

完成这些步骤后，您就可以使用引导程序了。

答案 2 :(得分：2)

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

对于我来说，我在nuxt的| | 0 (N=5) | 1 (N=5) | Total (N=10) | p value| |:-------|:-------:|:-------:|:------------:|-------:| |x1 | | | | 0.762| |- mean | 41 | 40 | 40.5 | | |x2 | | | | 0.782| |- mean | 66.6 | 65.6 | 66.1 | | 目录内创建了一个sass目录。

然后我将assets文件添加到我刚刚创建的app.scss目录中。

然后在sass内导入以下内容： app.scss

然后我做 @import "bootstrap-variable-override"; @import "~bootstrap/scss/bootstrap.scss";

之后，在yarn add node-sass sass-loader --save中，我修改css数组以包含我的 app.scss 

nuxt.config.js

这将编译我将在 app.scss 中写入和导入的所有CSS，并作为已编译的CSS提供。

但是，如果您是Bootstrap-Vue，那么您要做的就是将其添加为模块：

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

答案 3 :(得分：1)

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

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

提醒一下：当您在开发模式下运行Nuxt时，CSS将通过JS注入。但是，在生成时，Nuxt将创建一个单独的哈希CSS文件作为文档根目录的一部分。

答案 4 :(得分：1)

在我的情况下，我将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 
]

}，

答案 5 :(得分：1)

就我而言，我将其从CDN作为对象条目添加到link数组（在 nuxt.config.js 中）

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

答案 6 :(得分：0)

这是我的设置，适合那些想要自定义引导程序默认样式的人：

在我的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 :(得分：0)

您安装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的中间）

答案 8 :(得分：0)

我用于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在组件内部提供混合包，变量和网格： 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/

答案 9 :(得分：0)

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

value

然后，在 npm install bootstrap 文件中，像这样包含 Bootstrap 的 CSS 和 Javascript：

nuxt.config.js

请注意 css: [ "~/node_modules/bootstrap/dist/css/bootstrap.min.css" ], plugins: [ { src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", mode: "client" } ], 标志，它表示 Javascript 只能在客户端上运行。这可以防止发生 mode: "client" 错误，因为 Bootstrap 与服务器端渲染不兼容。

相关问题
最新问题