css - 如何在不复制库的情况下在 Angular 组件的 CSS 中使用第三方 CSS 库？

Question

我有两个组件都依赖于 hover.css 的效果。这两个组件都有 SASS 文件(简化)如下所示:

@import '~hover.css/scss/hover';

.some-class a {
  @include underline-from-left;
}

此外，我在 style.css 的全局样式中包含了 hover.css 库:

@import '~hover.css/scss/hover';

.some-global-class {
  @include some-other-mixin-from-hover;
}

这一切都工作正常并且编译正常，除了相当大的美中不足，我最终在我编译的应用程序中得到完整的 hover.css 三次 - 一次在 styles.js 和 main.js 中的两次(每个组件一次)。这显然不是一个可持续的模式。

如果我不在我的组件中使用 @import hover.css，Angular 将不会编译它们，因为它们引用了一个无法找到的 mixin。我已经尝试从 hover.css 深度链接我需要的效果，但这是一个马蜂窝，因为这些文件对 hover 库的其他部分具有下游依赖性。这显然不是特定于悬停，而是任何你想在 Angular 组件的 CSS 文件中导入和使用供应商库而不复制库的场景。

有什么想法吗？

Answer 1

hover.scss 文件中有什么？它只是混合或其他 CSS 吗？如果你只有 mixins 那么你应该没问题，如果你有一些 CSS 那么它就会被采用。例如:

这不会导致重复:

@mixin underline-from-left {
    text-decoration: underline;
}

如果你有这样的东西，那么 span block 将重复你导入它的次数:

@mixin underline-from-left {
    text-decoration: underline;
}

span {
    display: block;
}

也许一个想法是将 mixins 与实际 CSS 分开，然后仅导入 mixins 文件。