npm lite-server 无法识别 css 中的更改

Question

我正在构建 angular 2 英雄之旅教程应用程序。我正在编译我的 sass 以生成 css 但 lite-server 无法识别此更改，因此不会刷新浏览器。对 .ts 文件的更改被按预期识别并且浏览器刷新

我的文件夹结构是这样的：

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

请看下面的package.json。

  {
  "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"
  }
}

你能告诉我问题是什么吗？我注意到的一件奇怪的事是当 lite-server 启动时，.css 文件获取 HTTP 304 代码，public 文件夹下的所有其他内容获取 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)

Answer 1

是lite-server的known issue:

CSS with Angular 2 is embedded thus even though BrowserSync detects the file change to CSS, it does not inject the file via sockets. As a workaround, injectChanges defaults to false

npm lite-server 无法识别 css 中的更改

npm lite-server doesn't recognize changes in css

angularjs

npm

livereload

node-sass

npm-install