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