There's a lot of conflicting or vague advice about how to do this, and after trying a few of the solutions I've seen to no effect, I figured it's time to just ask directly: how am I supposed to setup Bootstrap in a new Laravel app? Here's where I'm at:
I have bootstrap-sass in my node_modules folder, I have gulp and laravel-elixir both installed through npm. But running gulp of course does no good, as I'm now staring at a webpack.mix.js file instead of a gulpfile. There is no gulpfile in this default configuration, so the gulp command just throws an error.
Getting past that, how do I compile the bootstrap-sass specifically, instead of just the app.scss file? How am I intended to reference it? Because I manually copied it before--ended up trashing that app entirely to start over--and referencing the absolute file path did nothing.
I feel completely lost, and as someone who remains to be convinced of the virtues of all these package managers, this is putting me off a lot. I need a walkthrough that's pertinent to the current version of Laravel, because it seems like every other version references stuff that has changed.
I strongly suggest you start with a boilerplate project! This way, you will not only have bootstrap already configured properly, you can also see how things "should" be done. It's a great way to learn as you go.
The boilerplate I'm currently using is: https://github.com/rappasoft/laravel-5-boilerplate
Another great project is: https://laracogs.com/
The latest Laravel 5.4 uses Laravel Mix that does not use gulp and elixir anymore but instead it uses Webpack.
There are sample config files app.js, bootstrap.js, webpack.mix.js and package.json that already have bootstrap, jquery and vue packages in place. So probably they should work out of the box.
npm install
npm run dev
And you should be running.
However I did not try the default setup and can not comment on that. But with custom - latest bootsrap v4 alpha 6 I could not get it working.
I found out that Webpack is a nasty thing and all javascript packages have problems with it.
Have no issue compiling bootstrap alpha 6 with laravel 5.4.
In package.json "devDependencies" just add : "bootstrap": "^4.0.0-alpha.6",
In bootstrap.js I just added : require('bootstrap');
And in your sass file just add : @import "node_modules/bootstrap/scss/bootstrap";
It should be working.
My only issue is with VideoJS which can t find a font file. I had to manually edit the source to specify the path to the font and it resolved the issue. Strange...
Just updated to the latest changes and got almost everything working. Thanks @JeffreyWay for fast updates!
I just do not understand how those changes got working select2 if it is installed with npm but commented out in bootstrap.js file.
But still bootstrap framework is failing:
Error: Bootstrap tooltips require Tether (http://tether.io/)
tried:
window.Tether = required('tether');
required('tether');
import 'tether';
Did you add tether in your package.json ?
"tether": "^1.*",
I have:
"tether": "^1.3.3",
But I guess it is not causing a problem. I can include it manually on page without those nasty dependency hell frameworks and it works but then other packages brake.
Looks like I'm getting used to Laravel Mix and Webpack.
Working bootsrap.js config for latest bootstrap v4 alpha 6 + tether + autosize + select2:
window.$ = window.jQuery = require('jquery');
window.select2 = require('select2');
window.Tether = require('tether');
window.Bootstrap = require('bootstrap');
window.autosize = require('autosize');
// those does not work
// window.Sortable = require('sortable');
// require('sortable');
But not sortable, yet.
ReferenceError: Sortable is not defined
Setup:
npm ls bootstrap autosize tether select2 sortable
├── [email protected]
├── [email protected]
├── select2@4.0.3
├── [email protected]
└── [email protected]
Digging the internet helped me to reach this post Webpack not resolving Sortable.js correctly #11.
Installed the proper library sortablejs in package.json.
npm install
Put it with correct naming sortablejs instead of sortable:
window.$ = window.jQuery = require('jquery');
window.select2 = require('select2');
window.Tether = require('tether');
window.Bootstrap = require('bootstrap');
window.autosize = require('autosize');
window.Sortable = require('sortablejs');
npm ls bootstrap autosize tether select2 sortablejs
├── [email protected]
├── [email protected]
├── select2@4.0.3
├── [email protected]
└── [email protected]
And it fcuking works! ????
You do not have to remove all Laravel files just node_modules directory.
rm -rf node_modules/
And reinstall all that node mess back. :)
npm install
Then play around with default setup that should work.
Okay, how am I intended to reference the CSS once I have it? Am I actually going to have to go pull a deprecated package off LaravelCollective to make the {!! HTML::style} thing I've seen suggested work? If not, what path am I supposed to use?
You should read the manual. It has those basic things covered.
https://laravel.com/docs/5.4/mix#versioning-and-cache-busting
And see this video about Laravel Mix
https://laracasts.com/series/whats-new-in-laravel-5-4/episodes/3
Did you get this working with mix.extract()? Using that results in Uncaught Error: Bootstrap tooltips require Tether when extracting Tether out.
No.
I'm not sure, but I think that there are some internal issues with Tether and Bootstrap integration. AFIR it was related to the way the library was called internally.
Here is a setup that works
https://github.com/JeffreyWay/laravel-mix/issues/440#issuecomment-286465595
Please or to participate in this conversation.