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?

seven-phases-max · Accepted Answer · 2015-06-18 19:41:23Z

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";

edited Jun 18, 2015 at 19:41

answered Jun 18, 2015 at 6:13

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Ramstad Over a year ago

I will give this a shot, although I am fairly sure this will work.

pespantelis · Accepted Answer · 2015-06-18 06:11:11Z

0

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.

answered Jun 18, 2015 at 6:11

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

1 Comment

Jordan Ramstad Over a year ago

Yes this is one way I have been considering.

Jordan Ramstad · Accepted Answer · 2015-06-18 19:57:43Z

0

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";

edited Jun 18, 2015 at 19:57

answered Jun 18, 2015 at 19:50

Jordan Ramstad

1793 gold badges9 silver badges37 bronze badges

Collectives™ on Stack Overflow

Laravel Elixir / Less include path as folder

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related