---
title: Cum sunt organizate fișierele CSS/LESS în Magento 2?
description: "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 - `/_/web/css` — stiluri specifice unui modul; - `/web/css/` — conține…"
url: "https://www.hostx.ro/kb/fisierele-magento-2-css-cascading-style-sheets/"
updated: "2026-07-26"
category: Programare / Aplicații / Magento
tags:
  - configurare
  - CSS
  - Magento 2
  - personalizare
  - teme
---

# 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**).