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.

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
8
  • 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
    Commented Dec 17, 2016 at 2:56
  • Did you use Grunt?
    – Khoa TruongDinh
    Commented Dec 17, 2016 at 3:02
  • Yes, I am using Grunt.
    – Peter A
    Commented Dec 17, 2016 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
    Commented Dec 17, 2016 at 5:39
  • Yes, we need to see: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/…
    – Khoa TruongDinh
    Commented Dec 17, 2016 at 5:50
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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