Problems excluding directories from less about lineman-angular-template

[davemo]

Instead of trying to configure file inclusion/exclusion for .less or .sass/.scss files via Grunt, I've found it easier to let the built in @import mechanisms that Less and SASS support do the work. Basically I would just setup a single manifest file that is configured for inclusion in paths, and setup proper @import blocks inside to control which .less files you want for your app. Here's an example:

paths: ["vendor/css/bootstrap/*.css", "vendor/css/flat-ui.less", "app/css/app.manifest.less"]

And inside app.manifest.less ...

@import "stuff";
@import "other-stuff.less";

etc...

This gives you more control over what .less files get slurped in for compilation.

[ganar]

Hi @davemo ,

indeed I tried that:
paths: ["vendor/css/bootstrap/*.css", "vendor/css/flat-ui.less", "app/css/less/design.less"]

the problem persists:

Running "less:compile" (less) task
>> NameError: variable @base-font-size is undefined in vendor/css/modules/buttons.less:11:13
>> 10 .btn-group > .popover {
>> 11   font-size: @base-font-size * 1.071; /* 15px */
>> 12   font-weight: 500;
Warning: Error compiling LESS. Used --force, continuing.
File generated/css/app.less.css created.

do you think it may be some sort of configuration error on my part?

[davemo]

I'm not sure how buttons.less file is getting loaded, but it seems like there's a less import that's expecting @base-font-size to be defined somewhere higher up the import chain.

[ganar]

There is something weird here:

• I took out all of the files from flat-UI outside the vendor/css directory
• I created a small .less file named vendor/css/flat-ui.less, it has only one line: @import: "../FLAT-UI/flat-ui.less"
• I ran lineman clean and lineman run, just in case
• My less paths are paths: ["vendor/css/bootstrap/*.css", "vendor/css/flat-ui.less", "app/css/less/design.less"]
• I get 3 files in generated/css: app.css, app.less.css, vendor.less.css

Now I don't get the error mentioned above, but for some reason the less file is not being concatenated with the rest of the CSS, is this by design? how do I get both app.css and app.less.css together?

[ganar]

I'm sorry about the last message: it did concatenate all of the files, it just did it backwards (first flat-ui followed by bootstrap), I'm trying to solve the order now

[ganar]

Hello @davemo: in the end I had to take out everything form the CSS folder an leave just one .less file referencing folders outside that directory

I do wonder what will I have to do to make the JS part of the flat-ui work, given the long list of dependencies—after line 750— that it has: What would you advice in this case?

[davemo]

Wow, that is a long list of dependencies! Hmm, well I would probably recommend reconsidering whether that many dependencies is worth using FlatUI :)

Some other thoughts, it's worth looking at the lineman default order of tasks which can give some insight on how things are concatenated together:

# less compilation happens before concat
appTasks:
    common: ["coffee", "less", "jshint", "handlebars", "jst", "concat", "images:dev", "webfonts:dev", "pages:dev"]
    dev: ["server", "watch"]
    dist: ["uglify", "cssmin", "images:dist", "webfonts:dist", "pages:dist"]

# the less target pulls from app/css and vendor/css
less:
    options:
      paths: ["app/css", "vendor/css"]
    compile:
      files:
        "generated/css/vendor.less.css": "<%= files.less.vendor %>"
        "generated/css/app.less.css": "<%= files.less.app %>"

# the concat target stitches files in this order
concat:
    css:
      src: [
        "<%= files.less.generatedVendor %>",
        "<%= files.sass.generatedVendor %>",
        "<%= files.css.vendor %>",
        "<%= files.less.generatedApp %>",
        "<%= files.sass.generatedApp %>",
        "<%= files.css.app %>"
      ]
      dest: "<%= files.css.concatenated %>"

Notice that less compilation happens prior to concat; if there are any @import statements inside of the less files those will be resolved during the less compilation phase. The less compile target is setup to pull .less files from app/css and vendor/css, I wonder if in the future it might be more intuitive to have separate directories for those things ie: app/less and vendor/less.

[ganar]

I looked all over the place for this file, but could not find it: it is not in the node_modules directory. Were is it?

Regarding the JS: I'm still unclear if it is even possible to run the dependencies in the order given, and how to go about it in the lineman configuration file

[davemo]

This is a general discoverability problem with Lineman, but the way it operates is that when you npm install -g lineman there are a set of default tasks that you get in the GLOBAL space. When you generate a new project with lineman new my-project you also get a set of LOCAL folders that mirror the ones in the global space. This is how Lineman works on a fundamental level, the local tasks extend the defaults from the global tasks; you can view the global set of defaults at the Lineman repository here:

https://github.com/testdouble/lineman/tree/master/config

[ganar]

I'm sorry to bother you again with this issue, but I think it is important

If you change this file to something like this:

`less: {
    compile: {
      options: {
        paths: [ 
          "vendor/css/vendor.less",
          "app/css/style.less"]
      }
    }
  }

and have app/css/modules/colors.less

colors.less will be rendered twice in the CSS after being @import="colors" in app/css/style.less.

This seem to be a bug.

Also: if you do take out app/css/modules/ from app/css it will no render twice, but lineman will fail to recognise changes in the 'modules" folder afterwards

[davemo]

Hey @ganar, sorry to leave you hanging on this one. I've run into this before working with LESS and the way the default lineman less compilation is setup. I'll take a look sometime this weekend and see if I can send a bugfix patch to Lineman. Have you been able to find a sufficient workaround?

[ganar]

Not yet: I've been coping by waiting to do changes on the HTML templates in order to see the CSS changes or restarting lineman.

I don't remember the lineman-backbone template having this issue, but I can be wrong

[davemo]

Hmm, it may be due to the fact that I changed out the concat task and targets in lineman-angular-template to support generating sourcemaps; I just pulled the css targets from the concat task into concat_sourcemap as well.

[davemo]

If you have time could you test the lineman-backbone-template with your .less file setup, @ganar? I'm interested to see if I've introduced this problem in lineman-angular-template's configuration or if it's higher up the chain in the Lineman default configurations.

[ganar]

yes: I'll test the lineman-backbone template this afternoon