With Bootstrap 4 now in beta, many people are beginning to switch their projects over to V4. Obviously the migration process requires changing existing markup, which you can learn more about in the official guide), but for this guide I'll only be covering how to integrate it in your Laravel Mix build process.
Remove the old Bootstrap dependency
To remove the old dependency, we just need to run this command in our project directory:
npm uninstall bootstrap-sass --save-dev
Install the beta dependencies
We'll need to install both the Bootstrap 4 beta as well as Popper.js (used by Bootstrap for things like dropdowns) using these two commands:
npm install firstname.lastname@example.org --save-dev npm install popper.js --save-dev
Update your app.scss
resources/assets/sass/app.scss replace the line
If you have
@import "variables"; you'll need to comment out or remove that line temporarily until you know everything else works, as some variable names or units have changed.
Update your bootstrap.js
A default Laravel installation includes a file named
and replace it with the following:
window.Popper = require('popper.js').default; require('bootstrap');
Now you should be ready to
npm run dev and hopefully everything will compile smoothly!
In my case, I ran into the error
Incompatible units: 'rem' and 'px' which was caused by the line
$font-size-base: 14px; in the default
_variables.scss file. As I mentioned earlier, you can comment out the import statement for that file, or your can comment out or change this line directly. If you run into any other errors, just be sure to read the message thoroughly to help point you in the right direction.