13

Which is then the best way to extend less files content in <module>/web/css/source/module/, like for instance Magento_Checkout/web/css/source/module/_minicart.less?

Assuming that to

A) OVERRIDE

  1. theme related less you must create (or copy) a less with the same name of the parent theme and put it in your theme like this theme-frontend-blank/web/css/source/_buttons.less -> <your-theme>/web/css/source/_buttons.less
  2. module specific less you must create (or copy) a less with the same name of the parent theme and put it in your theme like this theme-frontend-blank/Magento_Theme/web/css/source/_module.less -> <your-theme>Magento_Theme/web/css/source/_module.less
  3. UI lib less you must create (or copy) a less with the same name content in the library folder and put it in your theme like this magento2-base/lib/web/css/source/lib/_buttons.less -> <your-theme>Magento_Theme/web/css/source/lib/_buttons.less

and to

B) EXTEND

  1. theme related less you must create an _extend.less file in your theme adding _extend in the name like this <your-theme>/web/css/source/_navigation_extend.less to extend theme-frontend-blank/web/css/source/_navigation.less AND register that file with @import directive in the _extend.less of the theme content in web/css/source -> @import "_navigation_extend.less"
  2. module specific less you must create an _extend.less file in your theme module path like this <your-theme>Magento_CatalogSearch/web/css/source/_extend.less which extends the Magento_CatalogSearch original _module.less
  3. UI lib less you must create a less with the same name content in the library folder adding _extend in the name like this <your-theme>Magento_Theme/web/css/source/lib/_buttons_extend.less to extend magento2-base/lib/web/css/source/lib/_buttons.less AND register that file with @import directive in the _extend.less of the theme content in web/css/source -> @import "lib/_buttons_extend.less"

Theory must suggest you create a _minicart_extend.less but it doesn't automatically work. Maybe you should import that file in the _extend.less of that module like explained in B1 or B3?

And why these components extending less are not automatically included in the parsing of the css if this is the correct way to extend them but must be imported in the _extend.less?

(Here comes also another question: what's the differences between web/css/source/lib/_buttons.less and web/css/source/_buttons.less? 😕)

I'm a bit confused. Hope someone could help me.

Sorry for this long text.


Sources:

12

According to Magento 2 conventions, the best way to extend module styles is as follows:

If we want to extend styles from Magento_Checkout/web/css/source/module/_minicart.less we need to have 2 files

  • <your-theme>/Magento_Checkout/web/css/source/_extend.less where we will import our custom extensions. In this case @import "_minicart_extend.less"

  • <your-theme>/Magento_Checkout/web/css/source/_minicart_extend.less that will contain our custom styles.

The reason why we need a _extend.less file to specify the @imports is because Magento only includes automatically a _extend.less per module. Checking and adding all *_extend.less automatically will be time consuming and that is why it was not implemented like that.

In Magento Blank theme files responsible for minicart are located in /vendor/magento/theme-frontend-blank/Magento_Checkout/

We could also add all our custom styles directly into the _extend.less . However, spliting them into smaller and specific files like in the original module, keeps the code clear and better organised. That is also the recommended way according to Magento 2 standards.

  • Thank you @Jalogut! So, I could also call "_minicart_extend.less" as "foobar.less" and it would make no difference as it's what you @import in _extend.less that counts. Adding "_extendd.less" to component name it's just a convention to help you keep everything more clear? – Loreena May 5 '17 at 8:12
  • Exactly, that's the idea. – Jalogut May 6 '17 at 15:44
  • @Jalogut are you sure about them saying this "Checking and adding all *_extend.less automatically will be time consuming" or it's your guess ? because IMO sure it take a little more, but not that much, as to make developers do this each time they want to customize (plus a little confusion at first) – medmek Nov 16 '18 at 10:46

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.