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

Question

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

这是我的 Styles 文件夹的结构:

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" />