using bootstrap mixin from app/less files

[lionelB]

Hello,

I can't manage to use some bootstrap mixin / variable inside my application less files. Here is a sample folder organization:

/app
  less
    app.less
/vendor
  bootstrap
    boostrap files

and here is my config.coffee

stylesheets:
      defaultExtension: 'less'
      joinTo:
        'css/app.css': /^(app|vendor)/
      order:
        before: ['vendor/less/bootstrap/botstrap.less']

conventions:
    ignored: /^vendor(\/|\\)less(\/|\\)/

From app.less I want to be able to call some bootstrap mixins but brunch does'not found any mixin...

[paulmillr]

What's your app.less content?

[lionelB]

body{
   #gradient > .vertical(#fff, #e6e6e6);
}

the mixin is defined in bootstrap/mixins.less

[es128]

You need to

@import "../../vendor/bootstrap/mixins.less";

[lionelB]

The import tricks works only for app.less. Since app.less gather other files that use bootstrap mixin too, it seems that I need to add @import "../../vendor/bootstrap/mixins.less"; in each files...
So I'm not sure I understand how the less compiler work, but If use @import one time, I expect my variable and mixin are defined in the whole app.less files and child files, no ?

[es128]

I guess each file is handled individually. Either way, it's a less issue, not a brunch one.

[es128]

Hmm, but looking at my own example, it does seem like variables and mixins should be inherited into child files. Are you using @import for the child files in app.less? Don't expect it to happen after they're compiled when brunch concatenates them.

[lionelB]

for now I have app.css

@import '../../vendor/less/bootstrap/variables.less';
@import '../../vendor/less/bootstrap/mixins.less';

@import 'ui.stepper.less'; 

body{
  #gradient > .vertical(#fff, #e6e6e6);
}

and in ui.stepper.less

@import '../../vendor/less/bootstrap/variables.less';
@import '../../vendor/less/bootstrap/mixins.less';

.stepper-bt{
  position:absolute;
  right:0;
  height:15px;
  border:none;
  border:#ccc 1px solid;
  font-size:.8em;
  #gradient > .vertical(#fff, #e6e6e6);

  display: inline-block;
  padding: 0 .5em;
  margin-right:-3px;
}

the thing is if I omit the import... > I've an error which tells me that
error: Compiling of 'app\less\ui.stepper.less' failed. NameError:#gradient > .vertical is undefined in 'app\less\ui.stepper.less:17:2'

What do you mean by

Don't expect it to happen after they're compiled when brunch concatenates them.

[es128]

Just making sure you weren't assuming that brunch's file joining could act as a substitute for setting up dependencies within less.

Rename the child file to _ui.stepper.less so that brunch doesn't try to compile it on its own.

[lionelB]

Okay so I need to update that piece of config accordingly ?

conventions:
    ignored: /^vendor(\/|\\)less(\/|\\)/

[es128]

Yup. Here's one easy way:

    conventions:
        ignored: /(\/|\\)_/ #ignore any file OR DIRECTORY that starts with underscore

and rename vendor/less to vendor/_less (or rename the bootstrap dir to _bootstrap)

[lionelB]

Just making sure you weren't assuming that brunch's file joining could act as a substitute for setting up dependencies within less.

You mean that brunch join *.less files that match joinTo: together and compile the resulting file ?

[es128]

Yes, something like that. I said it before I saw that you had @import 'ui.stepper.less';. The point was, you need to do that, brunch doesn't do it for you.

[lionelB]

IMO, Css preproc allow to split and join multiple file so let them handle that and let brunch handle orphan files. But I guess it's not as easy as I say it :) Anyway thanks both for your help!

[es128]

Your suggestion is to auto-ignore dependencies? It wouldn't work well, brunch would have to be massively slowed down to do it, waiting to get the dependency list from each source file before deciding whether to compile the next one.

[lionelB]

I don't really suggest anything, I just say what sounds me the right working. Since It's not clear to me on how operation performs (css|less concatenation vs less compilation) I think I should only target the final file in the joinTo to avoid concatenation

joinTo:
   'css/app.css': /app(\/|\\)less(\/|\\)app\.less/

Is there a way to know what are the files that are compile and what is the content of the concatenated resulting file ?

[es128]

DEBUG=brunch:generate brunch build