Cum sunt organizate fișierele CSS/LESS în Magento 2?

Temele Magento 2 folosesc LESS, iar fișierele de stil se află în sistemul de fișiere al temei (nu în șabloane). Iată structura și cum personalizezi stilurile.

Structura fișierelor

• <theme>/<Vendor>_<Module>/web/css — stiluri specifice unui modul;
• <theme>/web/css/ — conține styles-m.less (mobile), styles-l.less (desktop), _styles.less (compus), print.less și subdirectorul source/ cu _theme.less (suprascrie variabilele bibliotecii Magento UI).

Personalizarea stilurilor

Ai trei abordări, într-o temă care moștenește Blank/Luma:

1. Suprascrii variabilele în web/css/source/_theme.less (cel mai simplu).
2. Adaugi fișiere LESS proprii importate în stilul principal.
3. Adaugi CSS propriu compilat.

Exemplu — schimbarea culorii butoanelor primare (ex. Add to Cart) în _theme.less:

@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;

Lucrează în modul developer, golește pub/static și var/view_preprocessed, și activează tema din Admin (Content → Design → Configuration).