Currently, I am in the process of developing a small Angular project that utilizes less for styling purposes.
My intention is to separate the styling into distinct folders apart from the components and instead have a main import file - main.less. This file will only consist of imports from the stylesheets located around it. For instance:
buttons/buttons.less
header/header.less
hero/hero.less
All these files are imported in the main.less file. Therefore, my components do not use the styleURL property but rely on a global stylesheet.
In my angular.json file, I have specified the styles like this:
"styles": [
"src/app/less/main.less"
]
When I run ng serve, everything works fine. However, if I make changes in buttons.less, although the page refreshes as expected, the changes are not reflected. This issue persists with every imported file in main.less. Strangely enough, If I directly add the button.less file in the "styles" section of angular.json, it works perfectly. Moreover, if I include styles directly in the main.less file - such as adding the following line:
body {
background-color: red;
}
I wonder what I'm doing wrong why my imports aren't being processed properly? Rebooting the angular server recompiles the files and then the changes take effect magically without any error logs.