Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-68874

gulp watch not working for theme main.css


    • Bug
    • Status: Closed
    • Resolution: Won't Fix
    • 7.0.2 CE GA3, 7.0.0 DXP FP4, 7.0.3 CE GA4, 7.0.X EE, 7.0.4 CE GA5, Master
    • None
    • Themes Infrastructure
    • None
    • 3
    • S01E03-"One-Eyed"Willy's hoard


      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:


      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:

      <link href="/o/dynamic-data-mapping-form-renderer/css/main.css" rel="stylesheet" type = "text/css" />

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

      Possible fixes:
      1) Rename theme main.css into something like theme.css
      2) Put theme main.css into the first line of the page head.
      3) Rename dynamic-data-mapping-form-renderer main.css

      Put the following line into the head part of portal_normal.ftl
      <link href="${css_folder}/theme-dev.css" rel="stylesheet" type="text/css">

      Create a file /mytheme/src/css/theme-dev.css and put your styles there.
      Result: Any changes to theme-dev.css instantly refreshes the browser window as expected.




            ivan.zaera Ivan Zaera
            crabel Christoph Rabel
            Kiyoshi Lee Kiyoshi Lee
            0 Vote for this issue
            0 Start watching this issue


              5 years, 26 weeks, 4 days ago


                Version Package