Laravel Elixir / Less include path as folder

Question

I have been looking but cannot find a way to add a folder to the less include path. or "namespace" it.

Basically rather then "bootstrap" being done like so:

elixir(function(mix) {
    mix.less('app.less', 'public/css/', {
        paths: [
            paths['bootstrap'] + 'less/'
        ]
    });
});

It would be like

elixir(function(mix) {
    mix.less('app.less', 'public/css/', {
        paths: {
            'bootstrap': paths['bootstrap'] + 'less/'
        }
    });
});

So if I wanted to call bootstrap in my app.less it would be:

@import "bootstrap/bootstrap";

The reason for this is including multiple less resources can sometimes cause multiple files to have the same name.

So is there anyway to do this without moving files around manually?

Answer 1

My gulpfile:

elixir(function(mix) {
    mix.sass('app.scss', 'public/css/', {includePaths: [
        'path/to/bower/components'
    ]});
});

Then include vendors like this:

@import "bootstrap-sass/assets/stylesheets/bootstrap";
@import "fontawesome/scss/font-awesome";

Hope I helped you.

Answer 2

No, there's no way to create a directory alias within Less or a derived tool (learn if your OS has such... many do). Besides you can always use variables in @import statements, e.g.:

@bootstrap: "...bla-bla-bla/bootstrap-5.2.8/less"; // can be set via compiler options as well

@import "@{bootstrap}/bootstrap";

Answer 3

I found the magical answer, this although seven-phases-max was extremely close, this is just a completed version.

the third variable of mix.less is for plugin options, meaning any plugin for less and modifyVars is available in the core.

So:

elixir(function(mix) {
    mix
        .less('app.less', 'public/css/', {
            modifyVars: {
                'bootstrap': '"' + path.resolve(__dirname) + paths['bootstrap'] + 'less/' + '"'
            }
        })
});

Kind of odd having to wrap with " but when it adds the variable it adds it raw.

The rest makes use of the other answer, but you can make use of

@import "@{bootstrap}/bootstrap";