Webpack: comportement différent avec le projet 'vue init webpack' et 'vue init webpack-simple'

Question

Je suis assez nouveau avec Webpack et Vue.js.

Nous savons que vue-cli apporter avec 2 modèles de projet, webpack et webpack-simple.

Lorsque j'utilise modèle webpack, Si je veux utiliser un autre paquet comme Bootstrap 4 beta, je dois juste faire:

dans main.js:

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

Dans config Webpack:

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

Et Bootstrap fonctionne.

Si j'utiliser le modèle webpack-simple, je dois le faire en App.vue pour faire fonctionner Bootstrap:

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

Donc, s'il y a des options causent ces différences? Je préfère webpack-simple pour simplifier le projet.

Mais je pense que c'est la raison pour laquelle certains autres paquets de mon application ne fonctionnent pas correctement (par exemple, les icônes dans mavon-editor ne s'affichent pas, mais cela fonctionne bien avec le modèle webpack).

Merci.

Answer 1

Je crains que les deux ne soient pas les meilleurs pour l'importation de bootstrap. essayez npm install bootstrap@4.0.0-alpha.6

et follow the instructions dans le site.

Answer 2

J'ai comparé le webpack config et package.json des deux et trouver la réponse.

Le point clé est un plugin appelé style-loader, en fait vue-style-loader dans Vue.js

qui peut:

CSS Ajoute au DOM en injectant une étiquette

installer en npm install vue-style-loader --save-dev

et de modifier la configuration webpack à partir de:

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

à:

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

maintenant automatiquement les, charge les fichiers css pas besoin de @import *.css dans <style> tag plus. Et d'autres paquets tiers ont également commencé à fonctionner correctement.