2

I have stock Magento 2 installed and running with a custom theme that uses the 'blank' theme as its parent.

My custom theme is active on my store and it works, I can create my own styles and template files and all is good.

I am at the point where I am trying to style my theme and I want to make use of Live CSS/LESS Updates.

I am using Chrome as my development browser.

Now, when I set Magento 2 to Client Side LESS Compilation, my page loads correctly as expected, however, when I inspect an element in the devtools of the browser, instead of seeing which file has the active styles, instead I am seeing style tags.

enter image description here

This is my first time using LESS, how do I go about fixing this so that the file names appear when inspecting elements.

0

You should use Server side less compilation with Grunt.

STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Server side less compilation

enter image description here

Remember to delete the static content and deploy again.

  • If I use Server Side LESS Compilation, the less.js file is not loaded and I therefore cannot use less.watch(); to monitor changes on the go. Is what I am seeing normal behaviour? – Peter A Dec 17 '16 at 2:56
  • Did you use Grunt? – Khoa TruongDinh Dec 17 '16 at 3:02
  • Yes, I am using Grunt. – Peter A Dec 17 '16 at 4:47
  • i see now, this is the first time I am using Grunt as well. What your saying is to put it into Server Side Compilation, then use Grunt to watch for changes in the Theme. I take it this method will allow me to make all the changes I want without having to have to have to constantly flush cache, etc? Will that allow automatic updates in the browser without a refresh? – Peter A Dec 17 '16 at 5:39
0

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html

Keep in mind that Client Side LESS Compilation doesn't work in production mode.

I personally suggest for you to use GRUNT for the compilation if you want to be Magento Way.

Take a look what is cached to avoid common mistakes.

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.