How to install mdbootstrap in Laravel Spark framework

mdbootstrap-laravel-spark.md

How to install mdbootstrap in Laravel Spark framework

Those steps were followed in order to install mdbootstrap in Laravel Spark 6.0 framework.

STEP 1: install dependencies

npm i mdbootstrap
npm i node-waves

STEP 2: modify file: resources/assets/js/components/bootstrap.js to add:

require('node-waves');
require('mdbootstrap');

STEP 3: (option A - worked on one installation, did not on another), same file add:

import 'bootstrap/dist/css/bootstrap.css'
import 'mdbootstrap/css/mdb.css'

OR

STEP 3 (option B): modify file: resources/assets/sass/app.scss to add:

@import "./../../../node_modules/mdbootstrap/scss/mdb.scss";

STEP 4 (option B): modify file: node_modules/mdbootstrap/scss/core/_mixins.scss to comment out lines 215 - 221:

    // @function set-notification-text-color($color) {
    //   @if (lightness($color) > 70) {
    //     @return $black; // Lighter backgorund, return dark color
    //   } @else {
    //     @return $white; // Darker background, return light color
    //   }
    // }

STEP 5: compile

npm run dev

Congrats!

You should see something like this:

DONE  Compiled successfully
                                                                                Asset       Size  Chunks                    Chunk Names
    fonts/vendor/mdbootstrap/roboto/Roboto-Thin.woff?7500519de3d82e33d1587f8042e2afcb    61.6 kB          [emitted]
     fonts/vendor/mdbootstrap/roboto/Roboto-Bold.eot?ecdd509cadbf1ea78b8d2e31ec52328c      21 kB          [emitted]
    fonts/vendor/mdbootstrap/roboto/Roboto-Bold.woff?dc81817def276b4f21395f7ea5e88dcd    62.9 kB          [emitted]
   fonts/vendor/mdbootstrap/roboto/Roboto-Bold.woff2?39b2c3031be6b4ea96e2e3e95d307814      50 kB          [emitted]
    fonts/vendor/mdbootstrap/roboto/Roboto-Light.eot?a990f611f2305dc12965f186c2ef2690    20.9 kB          [emitted]
    fonts/vendor/mdbootstrap/roboto/Roboto-Light.ttf?46e48ce0628835f68a7369d0254e4283     127 kB          [emitted]
   fonts/vendor/mdbootstrap/roboto/Roboto-Light.woff?3b813c2ae0d04909a33a18d792912ee7    62.3 kB          [emitted]
  fonts/vendor/mdbootstrap/roboto/Roboto-Light.woff2?69f8a0617ac472f78e45841323a3df9e    49.4 kB          [emitted]
   fonts/vendor/mdbootstrap/roboto/Roboto-Medium.eot?4d9f3f9e5195e7b074bb63ba4ce42208    21.4 kB          [emitted]
   fonts/vendor/mdbootstrap/roboto/Roboto-Medium.ttf?894a2ede85a483bf9bedefd4db45cdb9     127 kB          [emitted]
  fonts/vendor/mdbootstrap/roboto/Roboto-Medium.woff?fc78759e93a6cac50458610e3d9d63a0      63 kB          [emitted]
 fonts/vendor/mdbootstrap/roboto/Roboto-Medium.woff2?574fd0b50367f886d359e8264938fc37    50.2 kB          [emitted]
  fonts/vendor/mdbootstrap/roboto/Roboto-Regular.eot?30799efa5bf74129468ad4e257551dc3    21.3 kB          [emitted]
  fonts/vendor/mdbootstrap/roboto/Roboto-Regular.ttf?df7b648ce5356ea1ebce435b3459fd60     126 kB          [emitted]
 fonts/vendor/mdbootstrap/roboto/Roboto-Regular.woff?ba3dcd8903e3d0af5de7792777f8ae0d    61.7 kB          [emitted]
fonts/vendor/mdbootstrap/roboto/Roboto-Regular.woff2?2751ee43015f9884c3642f103b7f70c9    49.2 kB          [emitted]
     fonts/vendor/mdbootstrap/roboto/Roboto-Thin.eot?dfe56a876d0282555d1e2458e278060f    21.7 kB          [emitted]
     fonts/vendor/mdbootstrap/roboto/Roboto-Thin.ttf?94998475f6aea65f558494802416c1cf     128 kB          [emitted]
     fonts/vendor/mdbootstrap/roboto/Roboto-Bold.ttf?e31fcf1885e371e19f5786c2bdfeae1b     128 kB          [emitted]
   fonts/vendor/mdbootstrap/roboto/Roboto-Thin.woff2?954bbdeb86483e4ffea00c4591530ece    48.5 kB          [emitted]
           images/vendor/mdbootstrap/overlays/01.png?3888ecc03086ee849014409a07864ba6  100 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/02.png?06cefc0cc8bd642ccdd3135e650197dd  103 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/03.png?0a1396ef34d321f8c447c68c5056fc1f   99 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/04.png?51f1b9c3e256a651da5cf5dfe8204461  101 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/05.png?acb4b13ad6bf258c24daa53e9ca2f747  103 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/06.png?e25cdb8cfc9019880c36c107d92e6f38  101 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/07.png?d7874b3604b242cc9945c3d652c80d87  105 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/08.png?b85f136c7dbbd034469077f99a31019d  108 bytes          [emitted]
           images/vendor/mdbootstrap/overlays/09.png?a67596aabdbed532dab23829db04495b  100 bytes          [emitted]
     fonts/vendor/mdbootstrap/img/svg/arrow_left.svg?270f72df47e036d9cfa11f91f0a94a60  215 bytes          [emitted]
    fonts/vendor/mdbootstrap/img/svg/arrow_right.svg?d9ccc77c8240ad0dc2724cf333c0479e  214 bytes          [emitted]
                      fonts/radio-select-default.svg?480bc0aebb3da809dc5b8d6f7ec60576    1.55 kB          [emitted]
                  fonts/radio-select-is-selected.svg?ac228fff7b6af5be6d1620e5352ee43c    1.56 kB          [emitted]
                                                                           /js/app.js    2.44 MB       0  [emitted]  [big]  /js/app
                                                                         /css/app.css     456 kB       0  [emitted]  [big]  /js/app
                                                                     /css/app-rtl.css     456 kB       0  [emitted]         /js/app
                                                                /js/sweetalert.min.js      17 kB          [emitted]

require('mdbootstrap');

Unable to compile while i run
npm run dev