Material Design Bootstrap Pro jQuery v4.16.0 build with Laravel Mix

_material-design.scss

// Drop this file in resources/sass/ and put a "@import 'material-design';" into your app.scss

// Head workarounds
$roboto-font-path    : '~mdbootstrap-pro/font/roboto/' !default;
$image-path          : '~mdbootstrap-pro/img' !default;
$font-awesome-family : 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif;

// Library import
@import '~mdbootstrap-pro/scss/mdb-pro';

// Addon imports
@import '~mdbootstrap-pro/scss/addons/datatables';
@import '~mdbootstrap-pro/scss/addons/datatables-select';
// Here comes any addon you need

// Tail workarounds

// Use Font Awesome configured family. This allows using Font Awesome 5 Pro if you've paid for it
table.dataTable thead {
    .sorting:before, .sorting_asc:before, .sorting_desc:before, .sorting_asc_disabled:before, .sorting_desc_disabled:before {
        font-family : $font-awesome-family;
    }

    .sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after {
        font-family : $font-awesome-family;
    }
}

ul.stepper {
    .step {
        &.done:before {
            font-family : $font-awesome-family;
        }

        &.wrong:before {
            font-family : $font-awesome-family;
        }
    }
}

@media only screen and (min-width : 993px) {
    ul.stepper.horizontal {
        .step {
            &.done .step-title:before {
                font-family : $font-awesome-family;
            }

            &.wrong .step-title:before {
                font-family : $font-awesome-family;
            }
        }
    }
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
    font-family : $font-awesome-family;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    font-family : $font-awesome-family;
}

.picker__box {
    .picker__header {
        .picker__nav--prev:before, .picker__nav--next:before {
            font-family : $font-awesome-family;
        }
    }
}

// End of tail workarounds

// Extras. Feel free to remove if not needed/wanted

// Switches with colors. Add switch-... classes to the example in the MDB website
// Examples: <div class="switch switch-danger-checked switch-success-unchecked">...</div>
// or just: <div class="switch switch-info">...</div>
.switch {
    &.switch-info, &.switch-info-checked {
        label input[type='checkbox'] {
            &:checked:not(:disabled) + .lever {
                background-color : desaturate(lighten($info-color, 25%), 25%);
            }

            &:checked:not(:disabled) + .lever:after {
                background-color : $info-color;
            }
        }
    }

    &.switch-info-unchecked {
        label input[type='checkbox'] {
            &:not(:checked):not(:disabled) + .lever {
                background-color : desaturate(lighten($info-color, 25%), 25%);
            }

            &:not(:checked):not(:disabled) + .lever:after {
                background-color : $info-color;
            }
        }
    }

    &.switch-success, &.switch-success-checked {
        label input[type='checkbox'] {
            &:checked:not(:disabled) + .lever {
                background-color : desaturate(lighten($success-color, 25%), 25%);
            }

            &:checked:not(:disabled) + .lever:after {
                background-color : $success-color;
            }
        }
    }

    &.switch-success-unchecked {
        label input[type='checkbox'] {
            &:not(:checked):not(:disabled) + .lever {
                background-color : desaturate(lighten($success-color, 25%), 25%);
            }

            &:not(:checked):not(:disabled) + .lever:after {
                background-color : $success-color;
            }
        }
    }

    &.switch-warning, &.switch-warning-checked {
        label input[type='checkbox'] {
            &:checked:not(:disabled) + .lever {
                background-color : desaturate(lighten($warning-color, 25%), 25%);
            }

            &:checked:not(:disabled) + .lever:after {
                background-color : $warning-color;
            }
        }
    }

    &.switch-warning-unchecked {
        label input[type='checkbox'] {
            &:not(:checked):not(:disabled) + .lever {
                background-color : desaturate(lighten($warning-color, 25%), 25%);
            }

            &:not(:checked):not(:disabled) + .lever:after {
                background-color : $warning-color;
            }
        }
    }

    &.switch-danger, &.switch-danger-checked {
        label input[type='checkbox'] {
            &:checked:not(:disabled) + .lever {
                background-color : desaturate(lighten($danger-color, 25%), 25%);
            }

            &:checked:not(:disabled) + .lever:after {
                background-color : $danger-color;
            }
        }
    }

    &.switch-danger-unchecked {
        label input[type='checkbox'] {
            &:not(:checked):not(:disabled) + .lever {
                background-color : desaturate(lighten($danger-color, 25%), 25%);
            }

            &:not(:checked):not(:disabled) + .lever:after {
                background-color : $danger-color;
            }
        }
    }
}

material-design-bootstrap.js

// Drop this file in resources/js/ and put a "import './material-design-bootstrap.js';" into your app.js

// Workaround issue with MDB https://github.com/mdbootstrap/bootstrap-material-design/issues/245
// More info: https://mdbootstrap.com/support/jquery/bscustomfileinput-is-not-defined/
import bsCustomFileInput from 'mdbootstrap-pro/src/js/vendor/free/bs-custom-file-input';

// Import file structure for Material Design Bootstrap
// See https://mdbootstrap.com/support/jquery/latest-version-of-mdb-not-compatible-with-webpack/
// and https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/ for further info
// Comment out unneeded libraries in order to reduce build size
import 'mdbootstrap-pro/src/js/vendor/free/jquery.easing';
import 'mdbootstrap-pro/src/js/vendor/free/chart';
import 'mdbootstrap-pro/src/js/vendor/free/chartjs-datalabels';
import 'mdbootstrap-pro/src/js/vendor/free/bs-custom-file-input';
import 'mdbootstrap-pro/src/js/vendor/free/enhanced-modals';
import 'mdbootstrap-pro/src/js/vendor/free/velocity';
import 'mdbootstrap-pro/src/js/vendor/free/waves';

import 'mdbootstrap-pro/src/js/free/forms-free';
import 'mdbootstrap-pro/src/js/free/scrolling-navbar';
import 'mdbootstrap-pro/src/js/free/treeview';
import 'mdbootstrap-pro/src/js/free/wow';

import 'mdbootstrap-pro/src/js/vendor/addons/jquery.zmd.hierarchical-display';
import 'mdbootstrap-pro/src/js/vendor/addons/imagesloaded.pkgd.min';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables-select';
import 'mdbootstrap-pro/src/js/vendor/addons/rating';

import 'mdbootstrap-pro/src/js/vendor/pro/jquery.sticky';
import 'mdbootstrap-pro/src/js/vendor/pro/scrollbar';
import 'mdbootstrap-pro/src/js/vendor/pro/scrolling-navbar';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax-video';
import 'mdbootstrap-pro/src/js/vendor/pro/lightbox';
import 'mdbootstrap-pro/src/js/vendor/pro/ofi';
import 'mdbootstrap-pro/src/js/vendor/pro/picker';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-date';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-time';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-date-time';
import 'mdbootstrap-pro/src/js/vendor/pro/toastr';
import 'mdbootstrap-pro/src/js/vendor/pro/vector-map';
import 'mdbootstrap-pro/src/js/vendor/pro/vector-map-world-mill';

import 'mdbootstrap-pro/src/js/vendor/addons-pro/chat';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/multi-range';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/simple-charts';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/steppers';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/timeline';

import 'mdbootstrap-pro/src/js/pro/mdb-autocomplete';
import 'mdbootstrap-pro/src/js/pro/picker-time';
import 'mdbootstrap-pro/src/js/pro/buttons';
import 'mdbootstrap-pro/src/js/pro/cards';
import 'mdbootstrap-pro/src/js/pro/character-counter';
import 'mdbootstrap-pro/src/js/pro/chips';
import 'mdbootstrap-pro/src/js/pro/collapsible';
import 'mdbootstrap-pro/src/js/pro/file-input';
import 'mdbootstrap-pro/src/js/pro/preloading';
import 'mdbootstrap-pro/src/js/pro/range-input';
import 'mdbootstrap-pro/src/js/pro/sidenav';
import 'mdbootstrap-pro/src/js/pro/smooth-scroll';
import 'mdbootstrap-pro/src/js/pro/sticky';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown-searchable';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view-renderer';

window.bsCustomFileInput = bsCustomFileInput; // Workaround

package.json

{
    "private": true,
    "scripts": {
        "dev": "yarn run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "yarn run development --watch",
        "watch-poll": "yarn run watch --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "yarn run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.13.0",
        "axios": "^0.19.2",
        "bootstrap": "^4.4.1",
        "cross-env": "^7.0.2",
        "jquery": "^3.5.1", // v3.5.1 fixes problem with Bootstrap 4 collapsible cards/accordions
        "laravel-mix": "^5.0.4",
        "lodash": "^4.17.14",
        "mdbootstrap-pro": "git+https://[YOUROAUTHTOKEN]@git.mdbootstrap.com/mdb/jquery/jq-pro.git#4.16.0",
        "popper.js": "^1.16.0",
        "resolve-url-loader": "~3.1.0",
        "sass": "^1.26.3",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.0.0"
    }
}

webpack.mix.js

// Merge properly with your current webpack.mix.js
const mix = require( 'laravel-mix' );

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix

    .webpackConfig( {
        resolve : {
            alias : {
                'chart.js'       : 'mdbootstrap-pro/src/js/vendor/free/chart' ,
                'picker'         : 'mdbootstrap-pro/src/js/vendor/pro/picker' ,
                'datatables.net' : 'mdbootstrap-pro/src/js/vendor/addons/datatables' ,
                // Add here any missing library reported by webpack as an alias
            } ,
        } ,
    } )

    .autoload( {
        jquery : [ '$' , 'window.$' , 'jQuery' , 'window.jQuery' ]
    } )

    .js( 'resources/js/app.js' , 'public/js' )

    .extract()

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

;

if ( mix.inProduction() )
{
    mix.version();
}
else
{
    mix.sourceMaps();
}