Question

当模块没有直接引用变量时，如何在单个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，但这是一个黑客 - 我不想在那里开始声明任意数量的模块。

是否可以引用这样的变量并仍然编译为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" />

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

1 个答案: