I installed Angular UI Grid v3.2.9 via:
npm install angular-ui-grid
We use less css in our gulp server-side build and I was pleased to find a main.less file included in the install at ~/node_modules/angular-ui-grid/less/main.less. When I tried importing it like so from my ~/styles directory:
@import "../node_modules/angular-ui-grid/less/main.less";
I got the following Less CSS transpiler error:
Error: variable @bootstrapDirectory is undefined
That's because variable @bootstrapDirectory is defined in ~/node_modules/angular-ui-grid/less/variables.less as:
@bootstrapDirectory: "../../../node_modules/bootstrap";
and our bootstrap directory path is one level deeper and the target context of the variable is ~/node_modules/angular-ui-grid/less/. So, I fixed this error by overriding variable @bootstrapDirectory as follows:
@import "../node_modules/angular-ui-grid/less/main.less";
@bootstrapDirectory: "../../../../node_modules/bootstrap";
Now I'm getting an error that has so far stumped me:
Error: #ui-grid-twbs > .btn is undefined in ...
.btn is a bootstrap CSS class. The ~/node_modules/angular-ui-grid/less/bootstrap/bootstrap.less file imported by main.less looks like:
#ui-grid-twbs {
...
}
The bootstrap.less file explains:
* All of the bootstrap less elements are namespaced under `#ui-grid-twbs`
* This prevents the CSS generated using this file from conflicting with a project's
* import of bootstrap.
ui-grid-twbs is referenced in the following ui-grid less files:
/node_modules/angular-ui-grid/less/menu.less
/node_modules/angular-ui-grid/less/cellnav/less/cellNav.less
/node_modules/angular-ui-grid/less/pagination/less/pagination.less
To get the grid to render without the bootstrap styles, I imported the less files included in main.less that do not reference #ui-grid-twbs like so:
@import "../node_modules/angular-ui-grid/less/grid.less";
@import "../node_modules/angular-ui-grid/less/header.less";
@import "../node_modules/angular-ui-grid/less/body.less";
@import "../node_modules/angular-ui-grid/less/cell.less";
@import "../node_modules/angular-ui-grid/less/footer.less";
@import "../node_modules/angular-ui-grid/less/sorting.less";
@import "../node_modules/angular-ui-grid/less/icons.less";
@import "../node_modules/angular-ui-grid/less/rtl.less";
@import "../node_modules/angular-ui-grid/less/animation.less";
@import "../node_modules/angular-ui-grid/less/elements.less";
@import "../node_modules/angular-ui-grid/less/variables.less";
Others have reported this problem at https://github.com/angular-ui/ui-grid/issues/4173, but I could not understand the workaround. ChrisWiGit wrote:
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.
How does one apply this advice to successfully import the ui-grid less files for bootstap?
