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

Posted 2023-02-23

【中文标题】angular 2组件无法从外部css皮肤加载相对背景图像url

【英文标题】：angular 2 component cant load relative background image urls from external css skin

【发布时间】：2016-10-25 19:53:39

【问题描述】：

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

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

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

有没有办法做到这一点？ 目前唯一的解决方法是在 index.html 文件中包含 css。

【问题讨论】：

这是你的模块加载器的问题（阅读：systemjs 或 webpack conf）

【参考方案1】：

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

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

要实现它，您可以在 grunt、gulp、npm 或其他一些任务运行器中创建自己的任务，或者使用像 webpack 这样的捆绑程序来使用相对路径，然后将其转换为生产版本.

---

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

【讨论】：

那么这是否意味着我必须调整外部库皮肤中的所有图像 url 以使其与应用程序相关。有什么解决方法吗？

我正在使用 webpack 来处理样式的加载程序。然后我必须在开发时正确放置它（相对路径），它会为我重新生成它。但它仍然需要一个文件并将其与包含的样式捆绑在一起。我认为没有比使用 gulp/grunt 任务为您管理它更好的解决方案了。