これは私の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」にコピーし、その後、ここからロードしますか?
私については、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']
私はこのソリューションを使用し、魅力のように機能し、私の意見では最高のソリューションであり、高速かつ簡単です。次の手順に従います。
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'、]、...
これらの手順が完了すると、問題なく機能し、ブートストラップを使用できます。
私の場合、それをCDNからオブジェクトエントリとしてlink
配列に追加します(nuxt.config.js内)
link: [
{rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'}
]
これが私の設定です、これは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>
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ファイルが作成されます。
私の場合、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
]
}、