====== Boostrap installation ======

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

</code>



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');
  window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');

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
<code>
// 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";
</code>