ΠΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ CSS Π² ΠΏΡΠΎΠ΅ΠΊΡ, ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΠ°ΡΡΠ΅ΠΉ. ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ ΡΡΠΈ ΡΠ°ΡΡΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π² ΠΎΠ΄ΠΈΠ½ ΠΈΠ½Π΄Π΅ΠΊΡΠ½ΡΠΉ ΡΠ°ΠΉΠ», ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ²Ρ @import, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΡΠΎΠ±ΡΠ°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ LESS ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ° Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» CSS. ΠΠΎΡ Π·Π΄Π΅ΡΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. ΠΡΠ°ΡΠ·Π΅ΡΡ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΡΡΡ ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΉ CSS, Π° Π½Π΅ Π²Π°ΡΠΈ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ, ΡΡΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π΄Π΅Π»Π°Π΅Ρ ΠΎΡΠ»Π°Π΄ΠΊΡ ΡΡΠΈΠ»Π΅ΠΉ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ. ΠΡΡΡΠ½ΠΈΡΡ, ΠΈΠ· ΠΊΠ°ΠΊΠΈΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΠΎΠ»ΡΡΠΈΠ»ΡΡ ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΉ CSS, ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
ΠΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΎΡΠ»Π°Π΄ΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ source maps. Source maps ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π°ΡΡΠΎΡΠΈΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ Π΅Π³ΠΎ ΠΎΡΠ»Π°Π΄ΠΊΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΡΠΌΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ source maps Π² ΠΏΡΠΎΠ΅ΠΊΡ Ρ LESS ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠΌ.
Β
ΠΠ΅ Π²ΠΈΠ΄Π½ΠΎ, ΠΈΠ· ΠΊΠ°ΠΊΠΎΠ³ΠΎ LESS-ΡΠ°ΠΉΠ»Π° Π±Π΅ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ, Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ reference Π½Π° ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΉ core.css ΡΠ°ΠΉΠ». ΠΡΠΆΠ½ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ source maps. ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ source maps β Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Gruntfile.js ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Source maps:
less: {
dev: {
options: {
paths: ["assets/css/config", "assets/css/modules", "assets/css/modules/icheck/minimal"]
sourceMap: true,
sourceMapFilename: '/assets/css/core.css.map',
sourceMapRootpath: ''
//compress: true
},
files: {
"assets/css/core.css": "assets/css/core.less"
}
}
}
ΠΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ grunt, Π½Π°ΡΠ½ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ ΡΠ°ΠΉΠ» core.css.map, Π° Π² core.css Π² ΡΠ°ΠΌΡΠΉ ΠΊΠΎΠ½Π΅Ρ ΡΠ°ΠΉΠ»Π° Π΄ΠΎΠ±Π°Π²ΠΈΡΡΡ ΡΡΡΠΎΠΊΠ°:/*# sourceMappingURL=/assets/css/core.css.map*. Π’Π΅ΠΏΠ΅ΡΡ Π² Chrome DevTools ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ LESS Π²ΠΎΡ ΡΠ°ΠΊ (Π² Firebug Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅‑ΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠΈΡΠΊΠ°ΡΡ):
Ρ.Π΅. Π²ΠΈΠ΄Π½ΠΎ ΠΏΡΡΠΌΠΎΠΉ reference Π½Π° blocks.less Π²ΠΌΠ΅ΡΡΠΎ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ core.css.
ΠΠΎΠΆΠ½ΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΠΈ Π±Π΅Π· source map, Π½ΠΎ Π½Π° Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ LESS-ΡΠ°ΠΉΠ»ΠΎΠ² ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ LESS Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΠΈΠΌΠΎ.