Using variables/mixins in LESS files loaded separately from bootstrap.less

[dclawson]

Hi,

I am using the wp-less plugin and have my bootstrap files setup like so:

- assets/
    - less/
        - global.less
        - bootstrap/
             - bootstrap.less
             - mixins.less
             - variables.less
             - required.less
             ... <all other boostrap less files>

I use the required.less file to import the mixins.less and variables.less files into my global.css type files:

@import "variables.less";
@import "mixins.less";

In my global.less file which contains all the application specific styles for my website, I am trying to import the required.less file at the top but it seems that It won't let me do it this way. I have done this before using LESS on another website without the plugin so it seems the plugin is causing the issue.

I get no console errors and my mixins/variables are not accessible to my global.less file:

@import "@{lessurl}/bootstrap/required.less"; 

.test-box {
    .border-radius(6px);
}

Have you come across this issue previously?

Thanks

[noeltock]

What does the outputted CSS show? Cheers

Sent from my iPhone

On 25 Apr 2013, at 05:31, dclawson notifications@github.com wrote:

Hi,

I am using the wp-less plugin and have my bootstrap files setup like so:

• assets/
  • less/
  • global.less
  • bootstrap/
    • bootstrap.less
    • mixins.less
    • variables.less
    • required.less ... I use the required.less file to import the mixins.less and variables.less files into my global.css type files:

@import "variables.less"; @import "mixins.less"; In my global.less file which contains all the application specific styles for my website, I am trying to import the required.less file at the top but it seems that It won't let me do it this way. I have done this before using LESS on another website without the plugin so it seems the plugin is causing the issue.

I get no console errors and my mixins/variables are not accessible to my global.less file:

@import "@{lessurl}/bootstrap/required.less";

.test-box { .border-radius(6px); } Have you come across this issue previously?

Thanks

— Reply to this email directly or view it on GitHub.

[dclawson]

If I use the following inside global.less:

@import "@{lessurl}/bootstrap/required.less";

.test-box {
    border:1px solid #000;
    .border-radius(6px);
}

Then the output into /uploads/wp-less-cache/global.css is:

@import "http://local.sandbox.com/wp-content/themes/sandbox/assets/less/bootstrap/required.less";.test-box{border:1px solid #000;}

[noeltock]

Have you tried @themeurl, seems like it's not finding the file using lessurl.

[dclawson]

I tried with @{themeurl} and got the same result.

If I move the variables.less and mixins.less files out of /less/bootstrap/ and put them in the same directory as global.less then they compile fine with no errors.

It seems as though the error is importing a LESS file that is contained in a different folder to the file calling it.

Not sure if this is a LESS or wp-less issue.

[noeltock]

That's super weird tbh, permission issues on that directory?

[roborourke]

Hang on, if I'm reading this right you just need to use relative paths eg in global.less:

@import "bootstrap/required.less";

And so on. Does that work?

Robert O'Rourke sanchothefat.com +44 7816 329424

[dclawson]

The problem seemed a mixture of both me using the full file path instead of the one mentioned above and permissions set incorrectly on a dropbox folder I was trying to access.

All sorted! Thanks