[fix] laravel 5.4 mix bootstrap 4 alpha.6

how to use mix with bootstrap 4 alpha 6 let’s start with file ‘package.json’ add this code below.

"bootstrap": "^4.0.0-alpha.6",
"jquery": "^3.2.1",
"tether": "^1.4.0"

Once save file then use command line and wait a minute.

npm update

You can add in ‘devDependencies’ and then go to file ‘resources/assets/sass/_variables.scss’ looking for $font-size-base then change unit from ‘px’ to ‘rem’

$font-size-base: 14rem;

next, open file ‘resources/assets/js/bootstrap.js’ change code ‘require(‘bootstrap-sass’)’ to ‘require(‘bootstrap’)’

window._ = require('lodash');

/**
 * 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.
 */

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

require('bootstrap');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

Finally, open file ‘resources/assets/sass/app.scss’ looking for

@import “node_modules/bootstrap-sass/assets/stylesheets/bootstrap”;

to

@import “node_modules/bootstrap/scss/bootstrap.scss”;
// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";

and run command line

npm run dev

It should be fine.

ฝากข้อคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.