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

如何在模块不直接引用variables.less时引用在单个module.less文件中的中央variables.less文件中定义的变量？如何引用模块化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看起来像：

@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要点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向下编译，那么一切都会正常工作...

来源

2015-10-07 DaveCan

你需要的是配置WE编译该项目主文件而不是文件你编辑/保存。例如。请参阅http://stackoverflow.com/questions/19213067。 –

@ seven-phases-max谢谢，但我没有看到任何关于编译主文件的答案。有一些WE引用忽略带有大写下划线的文件。所以我猜测也许我应该将像Module.css这样的文件改为_modules.css或类似文件，这样它就不会尝试编译。明天早上会试试。或者我错过了什么？我如何配置你提到的方式？再次感谢。 – DaveCan

http://stackoverflow.com/a/19213447 –

我不知道你的环境是什么，但三重斜线指示它通常工作：

根
少
- - _ VARS。少
- - 模块
- - - someModule.less

内部 “someModule.less” 你应该试试这个：

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

来源

2017-07-04 13:36:17

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

回答

相关问题