How to load bootstrap-vue into Laravel 5 with laravel-mix?

Question

I am trying to load Bootstrap Vue into a Laravel 5.6 project

The official docs say to modify your webpack.config.js file like:

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

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

I don't have a webpack.config.js file so I tried loading the CSS in with 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');

This give me an error

mix.combine() requires a full output file path as the second argument.

and I'm not convinced it's the right way to do it.

What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?

Answer 1

Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:

// 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 already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.