Question

我有两个部分都依赖于hover.css的效果。这两个组件都具有（简化）的SASS文件，如下所示：

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

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

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

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

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

这一切都可以正常工作和编译，只是美中不足的是，我在已编译的应用程序中以完整的hover.css结束了三遍，一次是在styles.js中，一次是在{{1 }}（每个组件一次）。这显然不是可持续的模式。

如果我没有在组件中main.js hover.css，Angular将不会编译它们，因为它们引用了找不到的mixin。我尝试从@import进行深度链接，只需要我需要的效果，但这是一个大黄蜂的巢，因为这些文件对悬停库的其他部分具有下游依赖性。显然，这并非特定于悬停，而是在任何情况下，您都想在Angular组件的CSS文件中导入和使用供应商库而无需复制库。

有什么想法吗？

Answer 1

您的hover.scss文件有什么内容？仅仅是mixin还是其他CSS？如果您只有mixin，那么应该没问题；如果您有CSS，那么它将被接受。例如：

这不会引起重复：

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

如果您有类似这样的内容，那么span块将重复与您导入它一样多次：

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

span {
    display: block;
}

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

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

1 个答案: