2016-05-03 5 views
0

Angular2を教える小さなプロジェクトを開始します。私はYeoman GeneratorとGruntやGulpのような自動化ツールを使用しています。 Node Package Managerを使用していて、 "スクリプト"プロパティからオートメーションタスクを実行しています。Angmark2プロジェクトでnpm node-sassとconcurrentを使用してブラウザでページが更新されない

私は、lite-server、typescript、およびnode-sassを同時にインストールしました。ローカルサーバーが正常に動作するソースファイルを変更するときに "watch"タスクを実行すると、TypeScriptクラスを変更すると更新されますが、生成されたにもかかわらずCSSがロードされていないことがわかりましたcssが正しい私のソースscssファイルを修正するとき。ブラウザにはCSSは一切ロードされません。これは私のpackage.jsonです。scriptsオブジェクトのウォッチスクリプト/タスクを見ることができます。

{ 
     "name": "my-first-angular2", 
     "version": "0.0.1", 
     "private": true, 
     "scripts": { 
     "clean": "rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map", 
     "tsc": "./node_modules/.bin/tsc", 
     "tsc:w": "./node_modules/.bin/tsc -w", 
     "node-sass": "node-sass styles/ -o styles/", 
     "node-sass:w": "node-sass -w styles/ -o styles/", 
     "serve": "./node_modules/.bin/live-server --host=localhost --port=8080 .", 
     "watch": "concurrent \"npm run tsc:w\" \"npm run node-sass:w\" \"npm run serve\" " 
     }, 
     "license": "ISC", 
     "dependencies": { 
     "angular2": "2.0.0-beta.16", 
     "es6-promise": "3.0.2", 
     "es6-shim": "0.35.0", 
     "reflect-metadata": "0.1.2", 
     "rxjs": "5.0.0-beta.2", 
     "systemjs": "0.19.6", 
     "tslint": "3.7.0-dev.2", 
     "typescript": "^1.8.10", 
     "zone.js": "0.6.12" 
     }, 
     "devDependencies": { 
     "concurrently": "^2.0.0", 
     "lite-server": "^2.2.0", 
     "typescript": "^1.8.10", 
     "typings": "^0.8.1", 
     "bootstrap-sass": "^3.3.6", 
     "node-sass": "^3.6.0" 
     } 
    } 

生成されたCSSファイルはstyles/main.cssと呼ばれ、ので、私のindex.html

<!doctype html> 
<html> 
    <head> 
    <title>My First Angular2 App</title> 
    <!-- Libraries --> 
    <script src="node_modules/es6-shim/es6-shim.js"></script> 
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

    <!-- Stylesheet --> 
    <link href="styles/main.css"> 
    </head> 
    <body> 
    <script> 
     System.config({ 
     packages: { 
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('app.js') 
      .then(null, console.error.bind(console)); 
    </script> 
    <angular2></angular2> 
    </body> 
</html> 

にいずれかが私が間違っているのかを見ることができますように私はそれにリンクされて?私は、コンソールやコマンドラインにエラーは表示されません(実際はすべて正常に動作しています)。ここに私のフォルダ構造は、Atom IDEである:

You can see the generated main.css

答えて

0

<link rel="stylesheet" href="styles/main.css">タグで行方不明「のrel = 『スタイルシート』」が問題だったようです!

関連する問題