Npm lite-server does not recognize changes in css

I am creating an angular 2 hero tutorial tour. I am compiling my sass to create css, but the Lite server does not recognize this change and therefore does not update the browser. Changes to .ts files are recognized as expected, and the browser updates

My folder structure is as follows:

-app (contains .ts and .sass files)
-public (contains the compiled .js and .css files)
index.html

Please see package.json below.

  {
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "clean": "rm -rf public/*",
    "build:sass": "node-sass --source-map public/ app/ -o public/",
    "build:ts": "tsc",
    "watch:sass": "nodemon -e scss -w app/ -x 'npm run build:sass'",
    "watch:ts": "nodemon -e ts -w app/ -x 'npm run build:ts'",
    "build": "npm run build:ts && npm run build:sass",
    "lite": "lite-server",
    "watch": "concurrent \"npm run watch:sass\" \"npm run watch:ts\" \"npm run lite\""
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3",
    "node-sass": "^3.4.0",
    "nodemon": "^1.8.0"
  }
}

Could you tell me what the problem is? Itโ€™s somehow strange that I noticed when the Lite server started, the .css file receives HTTP code 304, and everything else in the shared folder receives 200

[2] 16.01.09 03:43:55 304 GET /./index.html (Unknown - 8ms)
[2] 16.01.09 03:43:55 304 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 12ms)
[2] 16.01.09 03:43:55 304 GET /node_modules/systemjs/dist/system.src.js (Unknown - 11ms)
[2] 16.01.09 03:43:55 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 11ms)
[2] 16.01.09 03:43:55 304 GET /node_modules/angular2/bundles/angular2.dev.js (Unknown - 11ms)
[2] 16.01.09 03:43:56 200 GET /public/main/boot.js (Unknown - 253ms)
[2] 16.01.09 03:43:56 200 GET /public/main/app.component.js (Unknown - 48ms)
[2] 16.01.09 03:43:56 200 GET /public/hero/hero-detail.component.js (Unknown - 39ms)
[2] 16.01.09 03:43:56 200 GET /public/hero/hero.service.js (Unknown - 39ms)
[2] 16.01.09 03:43:56 200 GET /public/hero/mock-heroes.js (Unknown - 118ms)
[2] 16.01.09 03:43:56 304 GET /public/main/app.css (Unknown - 14ms)
+4
source share
1 answer

lite-server known issue :

CSS Angular 2 , BrowserSync CSS, . injectChanges false

+2

Source: https://habr.com/ru/post/1623556/


All Articles