Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
What's the easiest way to make Bootstrap's Less assets available to the rest of my Less when pulling it in with Bower?
The first thing I've gotten working is to actually publish the assets from the bower_components directory before compiling, something like this:
elixir(function(mix) {
mix.publish('bootstrap/less/', 'resources/assets/less/vendor/bootstrap/')
.less('application.less');
});
...and then in application.less:
@import "vendor/bootstrap/bootstrap.less";
...but this feels truly horrifying.
The other option is something like this in my application.less file:
@import "../../vendor/bower_components/bootstrap/less/bootstrap.less";
...but this feels equally silly.
What's the actual recommended way to import a less file that's pulled in with Bower? Help out an Elixir n00b :)
Hey, buddy -
Try adding to the include path, like this:
elixir(function(mix) {
mix.less('application.less', 'public/css', {
paths: __dirname + '/vendor/bower_components/bootstrap/less'
});
});
Now, in your application.less file, you can just do:
@import "bootstrap";
Beauty! :) Where would I find documentation for other options like that? Guessing they are not Elixir related but coming from the Less compiler itself?
Thanks @JeffreyWay!
Nevermind, found it all here: http://lesscss.org/#using-less-configuration
Thanks again! :)
Yeah, exactly. Those gulp-less and gulp-sass plugins just defer to the compilers behind the scenes. So whatever options they accept will work.
Hey @JeffreyWay I download bootstrap with bower but in the same time I want to pull font-awesome, How should I set the paths: variable to mix both in the same file?
elixir(function(mix) {
mix.less('app.less', 'public/css', {
paths: {
__dirname + '/vendor/bower_components/bootstrap/less',
__dirname + '/vendor/font-awesome/less'
}
});
});
I'm not sure about if im right?
does it still work? because I can't get it to work... :(
Please or to participate in this conversation.