angular2-meteor styleUrl 不加载

Question

我有这个不加载样式的组件。不过模板加载正确。

// client/imports/navbar/navbar.ts
import {Component} from "@angular/core";
@Component({
    selector: 'navbar',
    templateUrl: 'client/imports/navbar/navbar.html',
    styleUrls: ['client/imports/navbar/navbar.css']
})
export class Navbar {}

到目前为止我已经尝试过：

设置 base href 在 /client/index.html
在 bootstrap

/client/app.ts

base href

加载样式：

styleUrls: [ '/client/imports/navbar/navbar.css', 'client/imports/navbar/navbar.css', 'imports/navbar/navbar.css', './navbar.css', 'navbar.css' ]

但是，根文件夹中的组件加载样式没有任何问题：

// client/app.ts
import {Component} from "@angular/core";
@Component({
    selector: 'app',
    templateUrl: 'client/app.html',
    styleUrls: ['app.css']
})
export class AppComponent{}

我已经知道了：

Angular 样式不支持相对路径
路径不应以斜杠开头 /
路径应该指向根目录，因为我使用 SystemJs (Meteor)。

但我还是试过了。

更新：

我发现让它成为摩尔的唯一方法是在同一个模板 html 文件中声明样式，如下所示：

 <style>
   .my-class{
       ...
   }
 </style>
 <div class="my-class">
      ...
 </div>

Answer 1

目前的问题似乎是，所有 *.css 文件都由构建合并在一起，然后通过 http://localhost:3000/merged-stylesheets.css?hash=something 加载，因此您将获得具有此名称的全局样式，但不是 Angular.

的组件本地样式

考虑我的以下示例：

@Component({
    templateUrl: 'client/home.component.html',
    styleUrls: [ 'client/home.component.css' ]
})
export class HomeComponent extends MeteorComponent {

我确实在 client/home.component.css 看到了对 CSS 的额外网络请求，但不幸的是，如果您查看内容，这将被视为 "route" 请求和 returns 整个页面而不是 CSS.

的内容

编辑：似乎已经有一个问题针对此提出：https://github.com/Urigo/angular2-meteor/issues/270

解决方法：

由于使用 styleUrls 按需加载 CSS，因此需要稍后可用。因此，您可以将它放在 meteor 项目的 public/ 文件夹中。在我的示例中，css 需要位于 public/client/home.component.css.

angular2-meteor styleUrl 不加载

angular2-meteor styleUrl doesn't load

css

angularjs

angular2-meteor

angular