acmendez's avatar

Getting Less into Laravel 5.4

Hello! Basically I'm trying to include bootstrap less. I've read some stuff online, but it's left me confused. I've included bootstrap less into the package.json file.

  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-less": "^3.3.8",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }

I've ran npm install I created resources/assets/less/app.less file with just @import "node_modules/bootstrap-less/bootstrap"; Then, I commented require('bootstrap-sass'); in resources/assets/js/bootstrap.js/bootstrap And, I changed webpack.mix.js file with

mix.js('resources/assets/js/app.js', 'public/js')
   .less('resources/assets/less/app.less', 'public/css');

But still I got a compilation error?

 ERROR  Failed to compile with 2 errors                              

 error  in ./resources/assets/less/app.less

Module build failed: Can't resolve './node_modules/bootstrap-less/bootstrap.less' in
...
resources/assets/less/app.less (line 9, column 0)
 near lines:
   // Bootstrap
   @import "node_modules/bootstrap-less/bootstrap";
...
 error  in ./resources/assets/less/app.less

Module build failed: ModuleBuildError: Module build failed: Can't resolve './node_modules/bootstrap-less/bootstrap.less' in
...
resources/assets/less'
 @ /home/ambarc/laravel-projects/less-stylesheet/resources/assets/less/app.less (line 9, column 0)
 near lines:
   // Bootstrap
   @import "node_modules/bootstrap-less/bootstrap";

Any ideas?

0 likes
3 replies
Smoleniuch's avatar
Level 2

Try to modify paths

Change

@import "node_modules/bootstrap-less/bootstrap";

to

@import "../../../node_modules/bootstrap-less/bootstrap/index"

Please read readme.md file inside of boostrap-less module folder.It will help you.

Im not a guru but your current importing path is relative to the folder where the app.less file is.

So it searches in

/resources/assets/less/node_modules/bootstrap-less/bootstrap

The "../" in the path means is goes to the folder one level up of current folder.

tommyc81's avatar

Or try using: @import "~bootstrap/less/bootstrap";

Note the ~.

I'm just using the "bootstrap" package, not "bootstrap-less". As Bootstrap 3 came with less by default.

Please or to participate in this conversation.