0

I try to change the font-size of the element with class box-content in the customer area from 1.6rem to 1rem.

enter image description here

enter image description here

As you can see it shows that this is defined in _module.less Line #406 :

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .block-reviews-dashboard {
        .product-name {
            &:extend(.abs-account-block-font-size all);
        }
    }
}

The whole path is: pub/static/frontend/hausfux/base/de_DE/Magento_Review/css/source/_module.less but interestingly, there is no such file in vendor/magento/module-review/view/web there is not even a css folder... ???

↑↑↑ EDIT: Now I understand. The file is in vendor/magento/theme-frontend-luma, which is the Luma theme which I extend.

Im not sure why it leaded me to this code, I can't see box-content anywhere in this file. How does the code in _module.less generate the code from the second screenshot?? LESS is so frustrating compared to CSS :(

How am I supposed to change the font-size without simply overriding it or is it okay to override it? I hope some experienced LESS user can tell me the best way to solve this.


Screenshots for answers:

enter image description here

1
0
  1. create a new file app/design/frontend/Vendor/theme/Magento_Customer/web/css/source/_extend.less
  2. add following content to the file:

& when (@media-common = true) { .your-element-selector { .lib-font-size(10); } }

  1. compile static
1
  • Does not work, it gets overriden by the original LESS code. Please see the last screenshot in my question. I need to override the original LESS somehow.
    – Black
    Mar 4 '20 at 16:24
0

I figured it out.

I created a new file THEME\web\css\source\lib\extend\_overrides.less and imported it in my _extend.less:

@import 'lib/extend/_overrides';

Then I opened a shell and grepped for the string abs-account-block-font-size:

find . -name '*.less' -print0 | xargs -0 grep ".abs-account-block-font-size"

and I found the definition in vendor\magento\theme-frontend-luma\web\css\source_extends.less:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .abs-account-block-font-size {
        .lib-font-size(16);
    }
}

So I added that piece of code into my _overrides.less and changed the font size to 10:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .abs-account-block-font-size {
        .lib-font-size(10);
    }
}

HINT: You should never add code directly into your _extend.less, because the file is ignored by "grunt watch". Only use the file for imports.

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.