akveo/ngx-admin

Render changed .scss without browser reload (HMR?)

Open

#2014 opened on Jan 23, 2019

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (24,990 stars) (7,916 forks)batch import
enhancementhelp wanted

Description

Issue type

I'm submitting a ... (check one with "x")

  • bug report
  • feature request
  • question about the decisions made in the repository

Issue description

Current behavior: Browser reloads page

Expected behavior: Browser reflects css changes without reloading page

Steps to reproduce: Run ng-serve Change .scss file Save

Other information:

The Angular 1 version (blur-admin) seemed to hot-replace css. Saves time when testing out new css, especially with things like modal dialogs that need to be re-opened on page load.

Hot Module Replacement (HMR) seems to be what I'm after.

npm, node, OS, Browser

Node: v10.14.2
Npm: v6.4.1

Angular, Nebular

"@angular": "^7.0.3",
"@nebular": "3.1.0",

Contributor guide

Tech stack
angulartypescriptcss
Domain
build systemdeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular CLIBasic webpack knowledgeUnderstanding of HMR
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate how to enable Hot Module Replacement (HMR) for SCSS in Angular CLI. Start by checking the official Angular documentation on HMR setup. Examine the `angular.json` file for build options like `extractCss` or `hmr`. If using custom webpack, look at `webpack.config.js` for style loader configuration. Consider using `@angular builders/custom webpack` to override style loaders for HMR. Reference the blur admin approach for CSS hot replace in AngularJS.