如何在不实际导入/覆盖变量的情况下引用LESS文件

时间:2016-04-18 15:04:39

标签: scope less phpstorm

我正在尝试将某些桌面模块重用于我的网页的移动版本。所有module.less引用variables.less - 主要用于IDE(PhpStorm),但也是为了让依赖项一目了然,我非常喜欢。

到目前为止,我认为这个LESS规则确实是引用 - 实际上它不是那样的。这些文件真的包含在内(一次)但没有输出(参见LESS docs)。结果我的移动变量被覆盖了。

├ 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'

是否有可能"参考"变量。无?欢迎任何其他建议。

1 个答案:

答案 0 :(得分:0)

最后,我提出了一个非常简单的解决方案:

只需在desktop/variables.less开头导入mobile/variables.less即可。这是有效的,因为默认的LESS行为是导入一次。由于它已在所有模块之前导入,因此桌面模块的@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'