Magento 2 : How can I use LESS variables in Modules' LESS files? (not theme)

Question

I try to include specific LESS variables in my Modules' LESS stylesheet. Note: my module, not my theme.

For example have a file called app/code/Vendor/Module/view/frontend/web/css/stylesheet.less. How can I use the parameters from lib/web/css/source/lib/variables/_layout.less in this stylesheet (like @layout-indent__width for example)?

Edit #1

I figured out I could do this like so:

@import '../../../../../../../../lib/web/css/source/lib/_variables.less';
@import '../../../../../../../../lib/web/css/source/lib/_responsive.less';

But somehow this doesn't look like the correct way to do this. Any suggestions on this?

Edit #2

I figured that including the LESS files like this would omit my variable overrides in my themes' _theme.less. Since the stylesheet in question is located in var/view_preprocessed/css/frontend/ThemeVendor/ThemeName/en_US/Vendor_Module/css I had to change the @import-directives to:

@import '../../css/source/lib/_variables.less';
@import '../../css/source/_theme.less';
@import '../../css/source/lib/_responsive.less';

Still seems a bit quirky, but at least it works :-/

I'm still open for suggestions though. This solution doesn't look right to me.

Edit #3:

I stand corrected, none of the above works anymore. I knew it was unstable to start with. :-/ Any suggestions anyone?

Answer 1

I can't immediately suggest a way of making what you are trying to do work, however I would say that that the module should not be reliant on LESS variables from the theme. To do so would be a Magento anti-pattern given the theme is there to style the modules not vice versa.

Whatever styles you are trying to apply here to the module's UI should be defined in your theme. I'd always suggest that the module should ship with its own default styles which can then be embellished by the theme of the site it is being used on.

Hope that helps!

Answer 2

If you want to use lib variables.

You don't need to include lib file or do not modified it.

you need just put code as below example,

.classname {
.lib-css(color, @color-white);
}

Answer 3

You don't have to import any lib core. If you want use less in your module and want to extend from styles of base module, just create folder source/module in your css folder in your module

Structured in module will be:
web
---css
------source
---------module
---------------_minicart.less
---------_module.less

For example you want to extend styles of minicart. Copy file minicart.less in magento-blank-theme inside folder Magento_Checkout

Answer 4

I had an approximate issue. The same variables for theme & module *.less files must be used. During production mode static content deployment Magento Blank theme didn't saw my _theme.less variables for my module (Magento 2.3).

Compilation from source: /app/source/vendor/magento/theme-frontend-blank/web/css/styles-m.less variable @custom-style is undefined in file /app/source/var/view_preprocessed/pub/static/frontend/Magento/blank/en_US/Test_Module/css/source/widgets/_test.less in _test.less

So, the only way I saw to wrote in _theme.less (to prevent duplication)

//@magento_import 'source/_variables.less';

And add file app/code/../../view/frontend/web/css/source/_variables.less