web-dev-qa-db-ja.com

bootstrap.cssをnuxtプロジェクトに含めるための最良の方法は何ですか？

これは私の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」にコピーし、その後、ここからロードしますか？

javascriptvue.jsnuxt.js
8
tolyan

私にとっては、scssを使用している場合の最良の方法

私については、nuxtのsassディレクトリ内にassetsディレクトリを作成します。

次に、作成した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配列を変更してmy app.scssを含めます

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

これは、私がapp.scssに書き込んでインポートするすべてのscssをコンパイルし、コンパイルされたcssとして提供します。

しかし、bootstrap-vueの場合は、これをモジュールとして追加するだけです。

  modules: ['bootstrap-vue/nuxt']
4
Zaffron

私はこのソリューションを使用し、魅力のように機能し、私の意見では最高のソリューションであり、高速かつ簡単です。次の手順に従います。

1 .Install 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/bootstrap-vue'、]、...

これらの手順が完了すると、問題なく機能し、ブートストラップを使用できます。

3
Armin

私の場合、それをCDNからオブジェクトエントリとしてlink配列に追加します（nuxt.config.js内）

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

これが私の設定です、これはbootstrapデフォルトスタイルをカスタマイズしたい人のためのものです：

私の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";

bootstrapのデフォルトスタイルを変更したい場合に備えて、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;

そして、他のすべてのスタイルとプラグインを1つのファイルにインポートします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>
1
Syed

CSSインポート（具体的にはbootstrap from node_modules、your case））をNuxt生成用の単一のファイルに集中化する場合は、 'assets/mainにルールのインポートを含めることができます構成で指定された.css '（'〜/ assets/main.css 'に更新することをお勧めします）。

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

注意：単に開発モードでNuxtを実行すると、CSSはJS経由で挿入されます。ただし、Nuxtが生成されると、ドキュメントルートディレクトリの一部として、ハッシュされた単一のCSSファイルが作成されます。

1
Steve Hynding

私の場合、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 
]

}、

1
Agung Pramono