“grunt lesslint”任务无法识别来自导入的变量

Question

作为序言，我是Grunt的新手，请原谅我对它的一般笨拙。

我正在尝试使用grunt-lesslint Grunt插件，但它失败了。我的问题是在较少的文件上运行grunt lesslint任务时，它无法识别导入文件中的变量和mixins。

如，

Error parsing app/_less/footer.less
.text-muted is undefined
Error parsing app/_less/navbar.less
variable @navbar-height is undefined

我的Grunfile.coffee州：

lesslint:
  src: ['<%= yeoman.app %>/_less/**/*.less']

基本上，我的文件结构是这样的：

├── _less/
│   ├── app.less
│   ├── navbar.less
│   └── footer.less
└── bootstrap/
    └── bootstrap.less

现在这里是app.less：

@import "../bootstrap/bootstrap.less";  # Variables & Mixins
@import "navbar";
@import "footer";

而且，在详细程度的情况下，这是footer.less的代码段：

#footer {
  .text-muted();
}

.text-muted以及所有其他变量和mixin在 bootstrap 导入中定义。 LESS编译得很好并且不会抛出错误，因此我试图弄清楚这是否是我的代码的问题，或者如果这是一个问题，我需要提出 grunt-lesslint 。 / p>

Answer 1

将您的Gruntfile.coffee更改为包含

lesslint:
    src: ['<%= yeoman.app %>/_less/app.less']
    options:
        imports: ['<%= yeoman.app %>/_less/*.less']

这样app.less将会被linted，并且它会从同一个文件夹中导入更少的文件。

这意味着它们被描述为进口并且应该了解bootstraps mixins

Answer 2

评论Ben之前所述的内容：添加：

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

to footer.less并且应该确实解决你的问题。当grunt-lesslint尝试lint footer.less时，仅 lint footer.less并且所有文件都导入其中。它不知道检查它的父文件（在本例中为app.less）是否有变量声明。

只要导入树是有向非循环图，您就可以重新导入任意数量的文件。少知道只在你的最终缩小的CSS中包含它们一次。

Answer 3

您可能需要更明确地使用@import声明。尝试将@import "../bootstrap/bootstrap.less";添加到导航栏/页脚文件的顶部;我假设发生的事情是，引导程序被编译到你的app.less文件中的CSS，所以当它试图解析其他文件时，它就不再有了mixin。

您需要为需要bootstrap mixins的每个文件执行此操作。