I read the page: https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html
And I am trying to see the code from the less file rather than the css so that I can debug the styling in Magento 2.
Currently, my Chrome browser has css source map enabled and also I use the default luma style. Also, I have installed grunt and compile the style: grunt exec:luma
Yet, when I inspect the style, the debugger shows the css.
Make sure double check Gruntfile.js file locate in root https://www.screencast.com/t/FMwyxqhno0e
If not available in root rename
Gruntfile.js.sample
to
Gruntfile.js
Than run CLI command
grunt --force clean:luma && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma &&
grunt exec:luma && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend --theme=Magento/luma &&
grunt less:luma && php bin/magento dev:source-theme:deploy css/styles-m css/styles-l --type=less --locale=en_US --area=frontend &&
php bin/magento cache:clean &&
php bin/magento cache:flush
There are two mode in LESS compiltation:
Client-side compilation : for not production mode, using the native less.js library.
Server compilation : just for the production mode.
You can set that in admin : Stores > Configuration > Advanced > Developer > Store View > Front-end development workflow.
To see the changes, you have to remove the pub/static content. and by doing this so many times, and every time you make a change, it becomes annoying and not necessarily practical. so grunt is a good thing for that.instead of clearing all this manually, grunt will do it for you, you just have to configure it properly. More informations.
I wrote a post with the complete configuration and with examples.
https://magento.stackexchange.com/a/219573/48355
hope it helps you.
