Hello readers!
This is going to be a pretty straightforward blog and I will be writing the issues I faced while developing and debugging to solve the problem. Lets keep making new mistakes and keep learning new stuff :)
Issue: CSS is not reflected in pages in DEV/QA
As work in local environment, we make changes to less files, refresh the page and see the changes. We commit those .less files into repository and when we check in the next environments, the changes are present in .less files but not reflected in pages.
Solution Check 1: As you would be knowing, all the .less files are converted into .css files with the less compiler and kept under a generated folder in below structure.
etc/designs/project/css/example.less
etc/designs/project/css/example.less/generated/example.css
So while checking in, make sure not to check in the generated folder content. Incase we do that, when we update the less file later, it might not generate the fresh css file as the generated css is already checked in browser takes up that copy instead of creating a fresh one.
Solution Check 2: Solution Check 1 not working? Okay, so now we have to delete the var files which are created automatically and browser looks upto it. Below is the location:
/var/clientlibs/etc/designs/project/clientlibs/components
Now your less must reflect in your browser :)
This is going to be a pretty straightforward blog and I will be writing the issues I faced while developing and debugging to solve the problem. Lets keep making new mistakes and keep learning new stuff :)
Issue: CSS is not reflected in pages in DEV/QA
As work in local environment, we make changes to less files, refresh the page and see the changes. We commit those .less files into repository and when we check in the next environments, the changes are present in .less files but not reflected in pages.
Solution Check 1: As you would be knowing, all the .less files are converted into .css files with the less compiler and kept under a generated folder in below structure.
etc/designs/project/css/example.less
etc/designs/project/css/example.less/generated/example.css
So while checking in, make sure not to check in the generated folder content. Incase we do that, when we update the less file later, it might not generate the fresh css file as the generated css is already checked in browser takes up that copy instead of creating a fresh one.
Solution Check 2: Solution Check 1 not working? Okay, so now we have to delete the var files which are created automatically and browser looks upto it. Below is the location:
/var/clientlibs/etc/designs/project/clientlibs/components
Now your less must reflect in your browser :)
