Question

我通过以下方式安装了Angular UI Grid v3.2.9：

npm install angular-ui-grid

我们在gulp服务器端构建中使用较少的css，我很高兴在〜/ node_modules / angular-ui-grid / less / main.less中找到安装中包含的main.less文件。当我尝试从我的〜/ styles目录中导入它时：

@import "../node_modules/angular-ui-grid/less/main.less";

我收到了以下Less CSS转发器错误：

Error: variable @bootstrapDirectory is undefined

那是因为变量@bootstrapDirectory在〜/ node_modules / angular-ui-grid / less / variables.less中定义为：

@bootstrapDirectory: "../../../node_modules/bootstrap";

我们的bootstrap目录路径更深一层，变量的目标上下文是〜/ node_modules / angular-ui-grid / less /。所以，我通过重写变量@bootstrapDirectory修复了这个错误，如下所示：

@import "../node_modules/angular-ui-grid/less/main.less";
@bootstrapDirectory: "../../../../node_modules/bootstrap";

现在我收到的错误让我感到难过：

Error: #ui-grid-twbs > .btn is undefined in ...

.btn是一个bootstrap CSS类。 main.less导入的〜/ node_modules / angular-ui-grid / less / bootstrap / bootstrap.less文件如下所示：

#ui-grid-twbs {
...
}

bootstrap.less文件解释：

 * 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在以下ui-grid less文件中引用：

/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

为了在不使用引导样式的情况下渲染网格，我导入了main.less中包含的较少的文件，这些文件没有引用＃ui-grid-twbs，如下所示：

@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";

其他人在https://github.com/angular-ui/ui-grid/issues/4173报告了这个问题，但我无法理解这种解决方法。 ChrisWiGit写道：

导入不支持更少的命名空间。全部使用名称空间使用它们的文件必须复制到一个较少的文件然后用less编译。

如何应用此建议成功导入用于bootstap的ui-grid less文件？

Angular UI Grid：在NPM安装后导入较少的CSS错误

0 个答案: