Mfrhtyj

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?

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);

}

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

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