vueファイルにbootstrapを反映させたい

前提・実現したいこと

現在、DjangoとVue.jsを使用してSPAでのサイトの作り方の勉強をおり、
CSSフレームワークとしてBootstrapを使用したいと思っています。

色々試して、以下の方法で反映させることはわかったのですが、
これだとすべてのVueファイルに対してBootstrapを定義しなければならないため、
出来れば一か所に記載すればそれで集約できるようにしたいと考えています。

何か解決策、もしくは参考サイトなどご存じの方がいらっしゃればご教授いただけませんでしょうか。

該当のソースコード

この方法では読み込めたのですが、すべてのVueファイルに
@import './public/mainsite/rest_framework/css/bootstrap.min.css'
を記載しなければいけないため、他にいい方法などありませんでしょうか。

vue
1<template>
2  <header>
3    <div class="navbar navbar-default" role="navigation">
4      <div class="container">
5        <div class="navbar-header">
6        </div>
7        ～～省略～～
8      </div>
9    </div>
10  </header>
11</template>
12
13<script>
14  export default {
15    data() {
16      return {
17
18      }
19    }
20  }
21</script>
22
23<style scoped lang="sass">
24  @import './public/mainsite/rest_framework/css/bootstrap.min.css'
25</style>

試したこと

index.htmlに記載する方法では反映されませんでした。

html
1  <head>
2    <meta charset="utf-8">
3    <title>タイトル</title>
4    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}" />
5  </head>

補足情報（FW/ツールのバージョンなど）

環境は以下の通りです。

Python3.7.3
Django2.1.7
Vue.js2.9.6

また、何か足りない情報などありましたらコメントいただければ追記させていただきます。
どうかよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

どういう形で作成したvueプロジェクトかわかりませんが、app.jsやmain.jsのようなエントリーポイントがあると思うので、そのファイル内でimportしてみてはどうでしょうか？

一応vueでbootstrapを使うにはbootstrap-vueが利用されることが多いみたいなので

npm install bootstrap-vue

でインストールしてエントリーポイントのファイルでimportします。

js
1import Vue from 'vue'
2import App from './App.vue'
3import 'bootstrap/dist/css/bootstrap.css'
4import 'bootstrap-vue/dist/bootstrap-vue.css'
5
6Vue.config.productionTip = false
7
8new Vue({
9  render: h => h(App),
10}).$mount('#app')

投稿2019/05/26 05:45

mottox2

総合スコア299

PochoPoccho

2019/05/26 08:01

迅速なご回答ありがとうございます。大変恐縮なんですが、importの方が思うように動作せず、build時にエラーが起きてしまいます。 INSTALLED_APPSに'node_modules'を追加してみたりしたのですが、解決しませんでした。以下がエラーの詳細です。 ``` ERROR in ./node_modules/css-loader!./node_modules/node-sass/lib!./node_modules/sass-loader/lib/loader.js!./node_modules/bootstrap-vue/dist/bootstrap-vue.css Module build failed: LoaderRunnerError: Module 'D:\Programs\workspace\MyProject\node_modules\node-sass\lib\index.js' is not a loader (must have normal or pitch function) at loadLoader (D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\loadLoader.js:43:20) at iteratePitchingLoaders (D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at iteratePitchingLoaders (D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\LoaderRunner.js:165:10) at D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\LoaderRunner.js:176:18 at loadLoader (D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\loadLoader.js:47:3) at iteratePitchingLoaders (D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at runLoaders (D:\Programs\workspace\MyProject\node_modules\loader-runner\lib\LoaderRunner.js:365:2) at NormalModule.doBuild (D:\Programs\workspace\MyProject\node_modules\webpack\lib\NormalModule.js:182:3) at NormalModule.build (D:\Programs\workspace\MyProject\node_modules\webpack\lib\NormalModule.js:275:15) at Compilation.buildModule (D:\Programs\workspace\MyProject\node_modules\webpack\lib\Compilation.js:157:10) at factoryCallback (D:\Programs\workspace\MyProject\node_modules\webpack\lib\Compilation.js:348:12) at factory (D:\Programs\workspace\MyProject\node_modules\webpack\lib\NormalModuleFactory.js:243:5) at applyPluginsAsyncWaterfall (D:\Programs\workspace\MyProject\node_modules\webpack\lib\NormalModuleFactory.js:94:13) at D:\Programs\workspace\MyProject\node_modules\tapable\lib\Tapable.js:268:11 at NormalModuleFactory.params.normalModuleFactory.plugin (D:\Programs\workspace\MyProject\node_modules\webpack\lib\CompatibilityPlugin.js:52:5) at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\Programs\workspace\MyProject\node_modules\tapable\lib\Tapable.js:272:13) at resolver (D:\Programs\workspace\MyProject\node_modules\webpack\lib\NormalModuleFactory.js:69:10) at process.nextTick (D:\Programs\workspace\MyProject\node_modules\webpack\lib\NormalModuleFactory.js:196:7) at process._tickCallback (internal/process/next_tick.js:61:11) @ ./node_modules/bootstrap-vue/dist/bootstrap-vue.css 4:14-133 @ ./src/main.js ``` 何かこの辺でわかることなどございませんでしょうか。よろしくお願いいたします。

mottox2

2019/05/26 09:16

webpackではcss-loaderを使うと読み込めるようになると思うんですけど、Django上で自分でwebpackを書いている感じですかね？ webpackを弄るのが面倒なのであれば、Django上でbootstrapのcssを読み込ませる方法も検討してみてください。

PochoPoccho

2019/05/26 09:43

mottox2様のコメントを拝見させていただき、改めてwebpackの設定を見直したところ、module.rulesのところのcssの定義が下記のように重複しており、「test: /.(sass|css)」のcssを削除すると正常に動きました。（下の定義で上書きされていた・・？） module.exports = { { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], test: /.(sass|css)$/, loader: ['node-sass', 'sass-loader'] } おかげさまで大変助かりました、ありがとうございました。

行動規範の内容に同意します