css - Angular 2 组件无法从外部 css 皮肤加载相对背景图像 url

Question

我在我的 angular2 组件中使用第三方 javascript 库。组件的皮肤 css 尝试使用相对 url 路径加载图像。我正在使用基于组件的架构，并且喜欢封装所有组件依赖项。

下面是我尝试做的，皮肤库无法找到相对路径图像。

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.html',
    styleUrls: ['test.css', '../../external_lib/skins/skyblue.css'],
    encapsulation:ViewEncapsulation.None
})

有什么办法可以实现吗？ 目前唯一的解决方法是将 css 包含在 index.html 文件中。

Answer 1

在定义样式和模板时，如 styleUrl 和 templateUrl 您应该非常小心。

问题是您有责任确保即使在构建之后也可以访问给定的 url。

要实现它，您可以在 grunt、gulp、npm 或其他一些任务运行器中创建自己的任务，或者使用像 webpack 使用相对路径，然后将其转换为生产构建。

---

在您的示例中，您必须将 styleUrl 指向在为整个应用程序提供服务时所在的路径。