Boostrap installation

npm install --save-dev bootstrap @popperjs/core autoprefixer css-loader postcss-loader sass sass-loader style-loader

How your webpack.mix.js should look:

const mix = require('laravel-mix');

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

How your app.scss should look:

@import '~bootstrap/scss/bootstrap';

How your app.js should look:

window.$ = window.jQuery = require('jquery');
import 'bootstrap/dist/js/bootstrap.bundle';

This is how you could use generated files in your .blade.php files:

<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>

If you want to customize Bootstrap, copy node_modules/bootstrap/scss/_variables.scss to resources/sass/_variables.scss, change variables you want and change your app.scss to:

@import '~bootstrap/scss/functions';
@import 'variables';
@import '~bootstrap/scss/bootstrap'; 

ou

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// functions
@import '~bootstrap/scss/functions';

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import "custom";