Variables in import statements.

[Giwayume]

I get "SyntaxError: variable @url is undefined" with the following logic:

.dynamic-import(@url) {
    @import "@{url}";
}
.dynamic-import("test/definition.less");

It appears imports are not as dynamic as I'd hoped. Is this expected behavior?

Funny thing is if I don't even call the mixin (only declare it), there's no errors.

.dynamic-import(@url) {
    @import "@{url}";
}

Note: tested on 2.7.3

[seven-phases-max]

Yes, this is known problem. Imports have to be evaluated before mixins (or anything else at all) - read comments there for more details (and see why it's better to avoid such code even if the issue is resolved somehow).
Also notice that even if it will work - none of variables defined in "test/definition.less" can override any of variables defined at the scope of .dynamic-import call (thus .dynamic-import(@url) can never become equal to @import "@{url}" - thus potentially throwing more unexpected problems at you - thus there most likely be not too much interest in making your example to work ever).

[seven-phases-max]

(I would probably leave this a open feature-request, but I doubt it makes sense while knowing it's barely to be ever implemented, so I leave it to you).

[seven-phases-max]

I added less/less-docs#388 (trying to describe it in a user-friendly words...).

[Giwayume]

I guess I'll attempt to explain my real problem here and maybe there is an existing solution. I have a framework of less files and a couple of themes (sets of variables) sitting on a server.

There are multiple applications that need to reference this common framework, and these applications pick & choose a theme. The problem comes with the pick & choose part; I need a way to allow each application to pick a theme, but at the same time if it doesn't specify one a default theme will be used.

So an example application.less would be:

@import "/path/to/framework.less";

If an application specifies a theme, my initial thought was:

@import "/path/to/framework.less";
@theme: "theme-name";

The problem is I can't figure out the "default" part. It's not working with variables (my example in #2771) and I can't use mixins hence this issue.

[seven-phases-max]

Can't you simply move theme import into the app itself? E.g.:

// in either proper order:
@import "/path/to/framework-theme.less";
@import "/path/to/framework.less";

[Giwayume]

The problem I'm trying to solve is having a default theme so it's not required to specify a theme. This means it needs to be a variable somewhere, and apparently the 'solution' less has for default variables doesn't work across imports?

[Giwayume]

I'll move this here.
Expected: @import "desired/path";
Actual: @import "default/path";

application.less

@import "framework.less";
@myPath "desired/path";

framework.less

@myPath "default/path";
@import "@{myPath}";

[seven-phases-max]

Apparently the 'solution' less has for default variables doesn't work across imports?

No, it is just variable usage inside @import statements is limited.
In any other statements variable overriding works across different files as expected.
(For comparison notice that in Sass you can't use variables in @imports at all ).

[seven-phases-max]

Btw., (I'm just keeping to offer workarounds) also notice that if you remove @my-path from framework.less it will work (if I'm not mistaken - can't test it right now). Obviously this means that you still have to require it to always appear in app.less but:

// in either order
@import "framework.less";
@theme "default";

is probably better than nothing?

[Giwayume]

Yes, I noticed that too but it doesn't solve the problem haha. It's also really weird that it works like that.

If I can't specify a default then there is no point in having external configuration in this case. You have no ideas for handling default variables mixed with import statements?

[matthew-dean]

Are the imports a "known" and limited list? If so, you could hardcode the imports, but actually "include" them via mixins guarded with variables.