我正在尝试将某些桌面模块重用于我的网页的移动版本。所有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'
。
是否有可能仅"参考"变量。无?欢迎任何其他建议。
答案 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'