Posted: October 14, 2017 15:05 | By: serge
The beta is out so I use in in my new projects now... To replace bootstrap 3 in a new installation of laravel (5.5 as of this writing) simply do the following:
Crate a new Laravel app... then, befor you run npm/yarn install...
In package.json, you need to replace "bootstrap-sass": "^3.3.7",
with "bootstrap": "4.0.0-beta"
. Your package.json devDependencies will now look like this:
{
"devDependencies": {
"axios": "^0.16.2",
"bootstrap": "4.0.0-beta",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
We then need to fix our resources/assets/sass/app.scss file. Change the import to point to the right scss file
// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";
Then fix any px value we have in the _variables.scss
file to rem. Note that 14px is .875rem ...
Now in resources/assets/js/bootstrap.js, replace require('bootsrap-sass');
with require('bootstrap')
;
That is it! Now you can run
npm install
then
npm run dev
and it should compile just fine.
Note that pagination styles are a different with BS4 so you will have to addapt the out of the box Laravel pagination if you use it...
Hi, my name is Serge Lachapelle, a nerdy entrepreneur from Montreal, Canada. I love tech, startups, business and freedom in general. I share my experiences here as I re-invent the way I work. Let's connect and create something cool...
Laravel 3
LIfe 1
Startup 1
VueJS 1
Laravel the source of all the awsomeness...