Best Way to Extend Module LESS Found in web/css/source/module in Magento 2

extendfrontendlessmagento2theme

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:

Best Answer

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 an _extend.less file to specify the @imports is because Magento only includes automatically an _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, splitting them into smaller and specific files like in the original module keeps the code clear and better organized. That is also the recommended way according to Magento 2 standards.

Related Topic