如何在Angular组件的CSS中使用第三方CSS库而不重复库？

Question

I have a two components that both rely on effects from hover.css . Both components have SASS files that (simplified) look something like this:

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

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

Additionally, I have the hover.css library included in my global styles in style.css :

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

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

This all works and compiles fine, except for the rather large fly in the ointment that I end up with full hover.css in my compiled application three times - once in styles.js and twice in main.js (once for each component). This is obviously not a sustainable pattern.

If I don't @import hover.css in my components though, Angular won't compile them because they reference a mixin that can't be found. I've tried deep linking just the effects I need from hover.css but that's a hornet's nest because those files have downstream dependencies on other parts of the hover library. This obviously isn't specific to hover, but any scenario in which you'd want to import and use a vendor library in an Angular component's CSS file without duplicating the library.

Any ideas?

Answer 1

What do you have on your hover.scss file? Is it only mixins or other CSS as well? If you only have mixins then you should be fine, if you have some CSS then it will get taken. For example:

This would not cause repetition:

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

If you have something like this, then the span block will be repeated as many times as you would import it:

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

span {
    display: block;
}

Perhaps an idea is to separate mixins from actual CSS, and then import only the mixins file.