0

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.

  • you are using grunt and still you don't see respective .less file , right ? – Manoj Deswal Jun 25 '18 at 10:56
1

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
0

There are two mode in LESS compiltation:

  1. Client-side compilation : for not production mode, using the native less.js library.

  2. 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.

  • thanks for your answer, however, the question I had was how can we show the less files in the browser for debug purpose. The answer below does the trick by compiling the less files. – Herve Tribouilloy Jun 26 '18 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.