0

我正在开始一个小项目来自学Angular2。由于它没有完全发布，我避免使用 Yeoman Generator 和 Grunt 或 Gulp 等自动化工具。我正在使用节点包管理器并从“脚本”属性运行我的自动化任务。

我同时安装了 lite-server、typescript 和 node-sass。当我在更改源文件时运行“监视”任务进行更新时，本地服务器运行良好，当我更改任何 TypeScript 类时，此更新会更新，但是我注意到尽管生成的 CSScss正确，但我的 CSS 没有被加载我修改了我的源scss文件。任何 CSS 都不会加载到浏览器中。scripts这是我的 package.json，你可以在对象中看到我的监视脚本/任务。

{
      "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 中的文件夹结构：

可以看到生成的main.css

4

1 回答 1

0

似乎<link rel="stylesheet" href="styles/main.css">标签中缺少的 'rel="stylesheet"' 是问题所在！

于 2016-05-03T07:31:16.417 回答