Sep 10, 2017

Level 1

Tip: Using Bootstrap 4.0.0 beta with Laravel 5.5

I owe credit for this to both Tip: Using Bootstrap 4 alpha 6 with Laravel 5.4 and sass includePaths with laravel-mix/webpackConfig as those two discussions helped me figure this out.

My instructions are based on a fresh Laravel 5.5 Install, so if you are working on an existing project you may need to adjust accordingly.

First remove any existing front end defaults (this will also uninstall Boostrap 3.x if it is installed).

php artisan preset none

Install jQuery, Popper.js, and Bootstrap 4.0.0 beta. (Popper.js is required if you are using Tooltips).

yarn add jquery popper.js [email protected] --dev

Create a file for overriding any default Bootstrap variables as per the documentation.

touch resources/assets/sass/_custom.scss

Amend resources/assets/sass/app.scss to

@import "custom";
@import "node_modules/bootstrap/scss/bootstrap";

Within resources/assets/js/bootstrap.js replace

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

with

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

// https://getbootstrap.com/docs/4.0/getting-started/webpack/
import 'bootstrap';

Change webpack.mix.js to what is below. This way webpack can install necessary Boootstrap 4 dependencies.

let mix = require('laravel-mix');
let webpack = require('webpack');

/*
 |--------------------------------------------------------------------------
 | 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({
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        })
    ]})
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

Use yarn run dev to recompile assets after changes or use yarn run watch or yarn run watch-poll.

Kaeltis

8 years ago

Level 1

Thanks for the guide!

While looking for more info about this, I found a couple of "improvements" (newish to this, so not sure if everything is correct):

resources/assets/sass/app.scss - use webpack tilde syntax

@import "custom";
@import "~bootstrap/scss/bootstrap";

resources/assets/js/bootstrap.js - use require() instead of import - not sure about this, seems to change how webpack generates webpack_require.

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

require('bootstrap');

webpack.mix.js- don't require webpack, use mix autoload

let 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.autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
        'popper.js': ['Popper']
    })
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

3 likes

jcobb

8 years ago

Level 1

@Kaeltis, Thanks for the improvements to import and require().

~~I couldn't get the mix.autoload() to work. Is it working for you?~~

It is all working now. What I thought was an issue with mix.autoload() was something else. Thanks again for the refinements.

ceesco53

8 years ago

Level 1

@Kaeltis when I do it with mix.autoload() I get "Uncaught TypeError: Popper is not a constructor" in my js debug console anytime I open a dropdown menu.

when I do it with mix.webpackConfig() like @jcobb did my bootstrap 4 dropdown menus work perfectly.

1 like

jcobb

8 years ago

Level 1

@ceesco53 I ran into that same problem last night and switched back to what I originally had using webpackConfig().

TinoN

8 years ago

Level 5

Hello, I made a Basic Bootstrap 4 (Beta) template for Laravel 5.5 (5.4) with authentication. You can download it here and find installation explanation as well. That should make things easier (at least I hope). Any comments, corrections and questions are very welcome! Thanks for all the comments above that helped me creating it. Regards.

2 likes

shonetow

8 years ago

Level 7

If you run into this error:

Argument `$color` of `darken($color, $amount)` must be a color

Then you need to add functions as well:

@import "~bootstrap/scss/functions";
@import "custom";
@import "~bootstrap/scss/bootstrap";

julesbloemen

8 years ago

Level 2

Thanks! nice guide!

Please or to participate in this conversation.