Как я могу использовать стороннюю библиотеку CSS в CSS компонента Angular без дублирования библиотеки?

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 и дважды в main.js (один раз для каждого компонента),Это явно не устойчивый паттерн.

Если я не @import hover.css в моих компонентах, Angular не скомпилирует их, потому что они ссылаются на миксин, который не может быть найден.Я пробовал глубоко связать только те эффекты, которые мне нужны от hover.css, но это гнездо шершня, потому что эти файлы имеют нижестоящие зависимости от других частей библиотеки наведения.Это явно не относится к наведению, но любой сценарий, в котором вы хотите импортировать и использовать библиотеку вендора в файле CSS компонента Angular без дублирования библиотеки.

Есть идеи?

Answer 1

Что у вас есть в файле hover.scss?Это только миксины или другой CSS?Если у вас есть только миксины, тогда у вас все будет хорошо, если у вас есть немного CSS, тогда оно будет принято.Например:

Это не приведет к повторению:

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

Если у вас есть что-то подобное, то блок span будет повторяться столько раз, сколько вы импортируете его:

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

span {
    display: block;
}

Возможно, идея состоит в том, чтобы отделить миксины от реального CSS, а затем импортировать только файл миксинов.