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

    Details

    • Type: Bug
    • Status: Closed
    • Resolution: Won't Fix
    • Affects Version/s: 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
    • Fix Version/s: None
    • Labels:
      None
    • Fix Priority:
      3
    • Sprint:
      S01E03-"One-Eyed"Willy's hoard

      Description

      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:

      <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

      Workaround:
      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.

        Attachments

          Activity

            People

            Assignee:
            ivan.zaera Ivan Zaera
            Reporter:
            crabel Christoph Rabel
            Participants of an Issue:
            Recent user:
            Michael Saechang
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Days since last comment:
              2 years, 46 weeks, 3 days ago

                Packages

                Version Package