При добавлении 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 будет ощутимо.