Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Regression from v3: scss changes causes app to reload

See original GitHub issue

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\Dylan van der Merwe\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (7 plugins total)

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Describe the Bug In v3, you would run ionic serve and whenever changes were made to the scss files in the project, the styling would be applied to the app without reloading the page or restarting the app.

This was amazing from a design perspective because changes could be made to the scss files and the results could be seen immediately in the app.

In v4 this is not longer the case. Changing any scss file causes a rebuild event of the entire app, which causes the app to reload. This means you lose any state you had.

The development/design experience has worsened dramatically in this regard from v3 to v4. I do appreciate that this is due to the change in the build process (using the ng CLI) but this does not excuse the worsened development experience. I don’t even think stencil does then when adjusting styles.

There must be a webpack or some form of config that can be set while in ionic serve mode? If not this should be raised with the Angular CLI team.

As it stands now, the development time for ionic v4 apps when styling pages has seriously deteriorated and something needs to be done.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

imhoffdcommented, Oct 2, 2018

@dylanvdmerwe I believe this is solved with enabling HMR for your app, see https://github.com/angular/angular-cli/wiki/stories-configure-hmr. I haven’t tried this yet myself.

0reactions

imhoffdcommented, Nov 30, 2018

@dylanvdmerwe Right, but we’re somewhat limited by what is possible with the Angular tooling. I am going to close this in favor of https://github.com/ionic-team/ionic-cli/issues/3769

Top Results From Across the Web

Page does full reload on scss changes, even with HMR enabled

I see in the console that HMR is enabled. However, updating a scss file causes the browser to fully refresh. This is specially...

Sass: @use

The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together.

Changelog - Cypress Documentation

Fixed an issue with Angular Component Testing where urls within SASS/SCSS files were not being correctly resolved which could result in incomplete styling....

Improving Site Performance - Gatsby

Step 3: Quantify the impact of each change you make. While you're doing performance ... Step 2: Use the Gatsby Script component to...

Safari Technology Preview Release Notes - Apple Developer

commitStyles() not changing the style attribute for individual CSS transform properties ... Fixed a crash clicking on Safari App Extension toolbar items ...