Можно ли изменять less стили меняя стили в Elements>Styles в chrome developers tools?

Question

[andrewnsk]

В developer tools я могу менять css файлы редактируя стили в Elements>Styles и потом сохранять, работая с css файлом. Т.е. например у меня показывается в Styles рядом с селектором .main style.css:2 {padding:25px;} Я меняю padding на 30px, нажимаю на ссылку style.css:2 и перехожу на вкладку Sources, на которой оказываюсь на второй строке в которой у меня появляется свойство padding:30px. Далее я могу сохранить style.css в файл.
Но если я использую style.css c source maps работающим с less, то в Elements>Styles у меня ссылка на .main style.less:2 {padding:25px;}. Если я изменю padding на 30px и так же как и в случае с css нажму на ссылку style.less:2, то попаду в Sources , в котором будет курсор на .main и в нем будет padding:25px, т.е. те изменения что я делаю не учитываются. Можно ли как-то автоматически чтобы изменялись стили less?

Answer 1

[Moskus]

Вы, конечно, не указали browser, в котором работаете. Так что вот вам решение для Firefox и Chrome соответственно:
https://developer.mozilla.org/en-US/docs/Tools/Sty...
https://code.tutsplus.com/tutorials/working-with-l...
Собственно, оба решения опираются на одну и ту же технологию Source Maps.

Comments

[andrewnsk]

Большое спасибо. Интересует работа в Chrome. Кое в чем разобрался. Grunt, Grunt watch task, Workspace. Но пока задача не решена. Внизу в консоли я открываю Quick Source. В ней я могу редактировать стили в less и с помощью grunt они автоматически компилируются в css , при сохранении. Браузер обновляет область с стилями на вкладке Elements и все хорошо. Но когда я меняю в этой области стилей значения, у меня выделяется кратковременно строка в less файле желтым и не изменяются стили в less. Нашел пример на сайте https://umaar.com/dev-tips/104-quick-source/ что так можно делать с scss.