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?

Brian Lee · Accepted Answer · 2018-04-07 21:09:23Z

15

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.

answered Apr 7, 2018 at 21:09

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Connor Leech Over a year ago

Gotcha! Thank you

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related