4

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?

  • I don't think you can do it. But why would you want to do it in the first place? Magento's official position is that it will remove less in the next versions and include sass. That means your module will probably not work in next versions. I think the best practice for now it is to have pure css in your module. – Claudiu Creanga Jul 20 '16 at 10:13
  • I would like to do this so that my module could have a basic style, but still make use of variables like the primary color or the breakpoints that are used. Interesting to hear that they're dropping less. Do you have any source article confirming that? – Giel Berkers Jul 20 '16 at 11:17
  • alankent.me/2016/05/21/… – Claudiu Creanga Jul 20 '16 at 12:06
3

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);
}
  • 1
    I know this is true for themes, but I want to include lib variables in my modules' LESS files. So not app/design/... but app/code/Vendor/Module/view/frontend/web/css/styles.less. If I try your solution I get the following error in the log: variable @color-white is undefined in file .... – Giel Berkers Jul 15 '16 at 10:01
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!

  • Definitely the correct answer. Props! :) – floorz Jun 27 '19 at 3:47
0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.