css - 如何在模块化LESS文件中引用全局变量？

Question

当模块不直接引用variables.less时，如何引用在单个module.less文件的中央variables.less文件中定义的变量？

这是我的样式文件夹的结构:

Styles
  _variables.less
  Site.less

  Modules
    _forms.less
    _navbar-top.less
    _panels.less
    _titlebar.less
    Modules.less

  Pages
    _page1.less
    _page2.less
    Pages.less

文件Site.less基本上如下所示:

@import "_variables.less";
@import "Modules/Modules.less";
@import "Pages/Pages.less";

(仅包含大写的LESS文件)

和Modules.less看起来像:

@import "_forms.less";
@import "_navbar-top.less";
@import "_panels.less";
@import "_titlebar.less";

(仅在同一文件夹中包含下划线前缀的文件)

Pages.less的结构相同。

我想做的是在Modules / _panels.less文件中包含以下内容:

.panel-form {
    .panel-variant(1px; @text-color; @component-default-bg; 1px);
    border-top: solid darken(@component-default-bg, 1px);
    border-bottom: solid darken(@component-default-bg, 1px);
    border-left: none;
    border-right: none;
}

但是，当然，我的LESS编译器(Visual Studio Web Essentials 2013.5)引发错误，并拒绝编译_panels.less文件，因为它引用了在其作用域中不存在的变量。

目前，我的解决方法是在Site.css中声明.panel-form，但这是一个hack-我不想开始在那里声明任意数量的模块。

是否可以引用这样的变量并仍然编译为CSS，如果可以，怎么办？如果没有，我应该使用更好的结构吗？

顺便说一句，我注意到LESS编译器也不喜欢Bootstrap，因为如果我在Bootstrap LESS文件中键入单个空格，则会引发错误。 navbar.less并尝试保存它，报告(对于navbar.less)mixin .clearfix()未定义。当然是这样，因为navbar.less没有引用mixins.less，但是如果它可以从bootstrap.less向下编译，那么一切都将正常工作...

Answer 1

我不知道您的环境是什么，但是使用三斜杠指令通常可以正常工作:

根

少

_vars.less

模块

someModule.less

在“someModule.less”内部，您应该尝试以下操作:

/// <reference path="../_variables.less" />