web-dev-qa-db-fra.com

Comment charger bootstrap-vue dans Laravel 5 avec laravel-mix?

J'essaie de charger Bootstrap Vue dans un projet Laravel 5.6

Les documents officiels disent de modifier votre fichier webpack.config.js comme:

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

Documents Webpack: https://webpack.js.org/guides/asset-management/#loading-css

Je n'ai pas de fichier webpack.config.js, j'ai donc essayé de charger le CSS avec Laravel mix

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');

Cela me donne une erreur

mix.combine () requiert un chemin de fichier de sortie complet comme deuxième argument.

et je ne suis pas convaincu que ce soit la bonne façon de procéder.

Quelle est la bonne façon d'ajouter bootstrap-vue dans un nouveau projet Laravel 5.6?

laravelwebpackvue.jslaravel-mixbootstrap-vue
9
Connor Leech

Importez les styles Bootstrap Vue dans votre app.scss fichier directement, au lieu du mixage:

// app.scss
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";

// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')

Laravel Mix a déjà configuré le chargeur CSS, vous n'avez donc pas besoin de configurer un webpack.config.js fichier.

12
DigitalDrifter