LESS files for custom compilation. Compiler Error

[ChrisWiGit]

Hi,

im using the less files of ui grid to create my own style.
I stumbled on different problems which I want to explain :

1. LESS compiler does not work on master-branch/src/less/main.less since the file imports bootstrap into a namespace. This seems not to be supported (a lot of tries difference between a imported namespace and a declared one less/less.js#1895 ). The error is "#ui-grid-twbs > .btn is undefined"
2. You can find the same error on the ui grid customizer page. http://ui-grid.info/customizer/ at the bottom: Therefore the page doesn't work, too, I think.
3. I'm not sure, but I cannot find a lot of less variables e.g. "ui-grid-icon-down-dir" anywhere in the git repos (full search in master and branch 3.0.3). These vars are defined in git-branch 3.03/release/ui-gridundefined.css (of course already compiled), however.
   Could you explain how these variables are defined, so I can used them in my less compilation?

Otherwise, great work! 👍

[JLLeitschuh]

So, this is my fault. Something that I never got around to fixing. This is because we have a grunt concatenate task that is supposed to pull in all of the less files into one. The problem with this is that the concatenate task doesn't resolve imports. What really needs to happen is that the less files that get put into release need to be copied over and moved into a place where the customizer can get to them. Additionally, bootstrap needs to be added as an NPM dependency for the gh-pages site.
The customizer being broken is something that I won't get around to for a while so if someone else wants to fix it please do.

In the next release (3.0.4 coming later this week) the NPM repo and bower will have the less files in their release. If you want to compile your own css files then all you will need is to have bootstrap installed as an NPM dependency and they should compile correctly.

I hope this answers your question.

[ChrisWiGit]

Thanks for your reply!

1. So this does work for you, because the grunt process copies all less files into one file I see. :) .Importing less files using a namespace (#ui-grid-twbs { import "..." }) only works in this way. (if the namespace import is in the same file as the namespace usage). I didn't see that immediately.
   I has nothing to do with npm version of bootstrap!
2. The customizer seems to show the very same error as I experienced when I compiled main.less or ui-grid.less using bootstrap.less as an external import. The task doesn't need to resolve less imports, imo. It just hast to put all ui-grid less files into one (e.g. using an array of files). On top of this file the bootstrap.less file must be added. Bootstrap can be added from npm then and doesn't need to be concatenated by the build process. Correct? :)
3. Well, I can't find any less file that contains the definition of e.g. ui-grid-icon-down-dir . Neither in master nor in 3.0.3 branch. Where does it come from? Are you talking about these missing less files when announcing the next release?

thanks :)

[JLLeitschuh]

1. It works in our build process. I think the ui-grid.less file in the less dist directory is only used by the customizer.
2. It could simply copy all of the less files into the one directory. The file layout would have to be maintained because the imports are all relative to each other. Its not as simple as combining all of the less files into one. I think in addition a feature.less file would have to be generated with all of the less files imported into it. This feature.less file would then have to be imported into the main.less (you would have to append the import to the end of the file post copy).
3. That's a font: https://github.com/angular-ui/ui-grid/blob/master/src/font/config.json#L77

[ChrisWiGit]

1. It works only because the namespace import of bootstrap is in the file that is compiled by less in the end. It does not work if you import a file that has such a namespace import.
2. I'm using grunt-contrib-less and modifyVar option (=object of lessvars and their values) to include the json variables and customLess (creating a temp less file and import it) into the less build process (also importing the font css) now. This works well if I copy all less files into one folder and import them from main.less. However, I need to remove all imports from the feature less files first (automatically done by grunt-text-replace)
3. thanks!

[JLLeitschuh]

What are you using for a package manager? NPM? Bower?

[ChrisWiGit]

We are using npm.

[JLLeitschuh]

So the newest release now contains the less files (3.0.4) unfortunately the bootstrap imports aren't in the right place. I think the import lines should all be using variables so it doesn't matter where you put bootstrap relative to your npm import.

[ingshtrom]

I am using Bootstrap and am running into the same problem. I am not super experienced with LESS, so this might be a silly problem on my part. This is all that is in my file that I use to import the main.less:

@bootstrapDirectory: '../../../../bootstrap';

@import (once, reference) '../bower_components/angular-ui-grid/src/less/main';

I know the paths are correct since I was getting errors about files not existing prior to when I saw the #ui-grid-twbs > .btn is undefined error.

I've read through this thread several times and I'm thinking it is slightly over my head... Is there a different process for using Bower with ui-grid?

Thanks!

[ChrisWiGit]

Import does not support namespaces in less. To use namespaces all files which use them have to be copied into one less file and then compiled with less.

[ingshtrom]

Ah, ok. so basically the fix for this (since I see this has the PRs PLZ tag) would be to not import into a namespace?

I will look through the grunt tasks and see how they are doing that so that hopefully we can replicate it in Gulp for my project.

Thanks, @ChrisWiGit!

[ChrisWiGit]

I'm using a grunt task with grunt-text-replace to remove #ui-grid-twbs completely since I'm using bootsstrap, too and I want to have adapted bootstrap classes to spread everywhere.

[paveleremin]

So what the solution with .btn() undefined mixin? I try import angular-ui-grid to my project with font-path customization

[sameerbhardwaj]

It seems the the customizer is still broken. Can someone pls advise how to change the look and feel of the grid based on a custom style sheet ?

[boroth]

So, how do I use the ui-grid less files when my application is using a version of bootstrap that doesn't contain the .btn() mixin?

[abheist]

There a problem with url, goto: http://ui-grid.info/customizer/#/
customiser is not broken..

[dani-t]

Has anyone found a solution for #ui-grid-twbs > .btn is undefined? I am trying to build using gulp.