Task 'gulp watch' not working for theme main.css

[izaera]

Liferay 7 supports gulp watch and live-reload for faster development cycles.

Alas, it doesn't work for themes and especially main.css, editing _custom.scss does not trigger an automatic reload of the css on the page.

Steps to reproduce:

1. Install LiveReload browser plugin
2. Create a new theme
3. Start "gulp watch"
4. Add theme to a page and open said page in the browser
5. Edit _custom.scss, add something really visible like:

*{background:red;}

gulp watch now hot-deploys the theme and triggers a reload of "main.css" (and aui.css)

Expected behavior: Page becomes red without any user interaction Actual behavior: Page doesn't change

At first I thought that it doesn't work at all, but something more subtle happens. gulp watch actually triggers a reload of main.css but this doesn't reload the theme main.css but the first link to a css file "main.css"

The first css in the head of a page is this one:

So instead of reloading theme/css/main.css this dynamic data mapping css is reloaded whenever _custom.scss is edited.

Source: LPS-68874