Question

我正在尝试将某些桌面模块重用于我的网页的移动版本。所有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'。

是否有可能仅＆＃34;参考＆＃34;变量。无？欢迎任何其他建议。

Answer 1

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

只需在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'

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

1 个答案: