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

2024年1月14日 245次阅读

我正在构建英雄教程应用的角度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服务器启动时,.css文件获取HTTP 304代码,公共文件夹下的其他所有内容都获得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)

最佳答案 它是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

点赞