如何在没有实际 importing/overriding 变量的情况下引用 LESS 文件

Question

我正在尝试为我的网页的移动版本重用一些桌面模块。所有 module.less 引用 variables.less - 主要针对 IDE (PhpStorm)，但也让依赖项一目了然，我真的很喜欢。

到现在我还以为这个LESS规则是真正的引用——其实不是这样的。文件真正包含（一次）但没有输出（参见 LESS 文档）。结果我的移动变量被覆盖了。

├ desktop/
│  ├ modules/
│  │  └ foobar.less
│  │      > @import (reference) "../variables.less"
│  ├ main.less
│  │   > @import "variables.less"
│  │   > @import "modules.less"
│  ├ modules.less
│  │   > @import "modules/foobar.less"
│  └ variables.less
│      > @bundle: 'desktop'
│
└ mobile/  
   ├ main.less
   │   > @import "variables.less"
   │   > @import "modules.less"
   ├ modules.less
   │   > @import "../desktop/modules/foobar.less"
   └ variables.less
       > @bundle: 'mobile'

编译手机后 mobile/main.less 结果是 @bundle 等于 'desktop'.

有没有可能只"reference"variables.less？欢迎任何其他建议。

Answer 1

最后我想出了一个非常简单的解决方案：

只需在mobile/variables.less的开头导入desktop/variables.less。这是可行的，因为默认的 LESS 行为是 import once。由于它已经在所有模块之前导入，桌面模块的 @import 规则不会导致（重新）导入 - 因此不会覆盖任何变量：

├ desktop/
│  ├ modules/
│  │  └ foobar.less
│  │      > @import (reference) "../variables.less"
│  ├ main.less
│  │   > @import "variables.less"
│  │   > @import "modules.less"
│  ├ modules.less
│  │   > @import "modules/foobar.less"
│  └ variables.less
│      > @bundle: 'desktop'
│
└ mobile/  
   ├ main.less
   │   > @import "variables.less"
   │   > @import "modules.less"
   ├ modules.less
   │   > @import "../desktop/modules/foobar.less"
   └ variables.less
       > @import (reference) "../desktop/variables.less"
       > @bundle: 'mobile'

如何在没有实际 importing/overriding 变量的情况下引用 LESS 文件

Howto reference a LESS file without actually importing/overriding variables

scope

less

phpstorm