I am trying to reuse some desktop modules for a mobile version of my webpage. All module.less references variables.less - mostly for the IDE (PhpStorm), but also for having the dependencies at a glance, which I really like.
Up to now I thought this LESS rule is really referencing - actually it is not like that. The files get really included (once) but without outputting (see LESS docs). As a result my mobile variables get overridden.
├ 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'
After compiling the mobile mobile/main.less the result is @bundle equals 'desktop'.
Is there a possibility to only "reference" the variables.less? Any other suggestions are welcome.
Finally I came up with a very easy solution:
Simply import desktop/variables.less at the beginning of mobile/variables.less. This works because the default LESS behavior is import once. Since it is already imported before all modules, the desktop module's @import rule won't cause (re-)importing - therefore won't overwrite any variables:
├ 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'