Webpack： 'vue init webpack'と 'vue init webpack-simple'プロジェクトの動作が異なります

Question

WebpackとVue.jsでかなり新しいです。

vue-cliは、2つのプロジェクトテンプレートwebpackとwebpack-simpleを持っています。

main.jsに：

import 'jquery' 
import 'bootstrap/dist/css/bootstrap.css' 
import 'bootstrap' 

のWebPACKの設定で：

plugins: [ 
    new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    Popper: ['popper.js', 'default'] 
    }) 
] 

私は Bootstrap 4 betaのような他のパッケージを使用したい場合は、私は、 webpackテンプレートを使用する場合

は、私はちょうど行う必要があります

ブートストラップが動作します。

私はwebpack-simpleテンプレートを使用している場合は、私はブートストラップ動作させるためにApp.vueでこれを実行する必要があります。

<style scoped> 
    @import '~bootstrap/dist/css/bootstrap.css'; 
</style> 

いくつかのオプションがあるのであれば、これらの違いを引き起こしますか？

私はプロジェクトを簡単にするためにwebpack-simpleを好んでいます。

アプリの一部のパッケージが正しく動作しない理由が考えられます（mavon-editorのアイコンは表示されませんが、webpackテンプレートでは正常に動作します）。

ありがとうございました。

Answer 1

両方の方法がブートストラップをインポートするのに最適ではないと思います。 try npm install bootstrap@4.0.0-alpha.6

およびfollow the instructionsです。

Answer 2

ウェブパックの設定とpackage.jsonの両方を比較して答えを見つけました。

ことによってそれをインストールし、タグ

を注入することにより、DOMにCSSを追加します：

キーポイントは、プラグインができるがVue.js

にvue-style-loader実際、style-loaderと呼ばれていましたnpm install vue-style-loader --save-dev

と編集webpackの設定：

{ 
    test: /\.css$/, 
    loader: 'css-loader' 
    }, 

へ：

{ 
    test: /\.css$/, 
    use: [ 
     { 
     loader: 'vue-style-loader' 
     }, 
     { 
     loader: 'css-loader' 
     } 
    ] 
    }, 

今cssファイルが読み込ま自動的に、もう@import *.cssで<style>タグは必要ありません。 他のサードパーティのパッケージも正しく動作するようになりました。