[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');


 * 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”;


@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.

ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ


Leave a Reply

Your email address will not be published. Required fields are marked *

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

Message us

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้ที่จำเป็น

    คุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้