Блог

У меня есть два компонента, которые оба полагаются на эффекты от 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 наведу.css на свои компоненты, Angular не будет их компилировать, потому что они ссылаются на mixin, который невозможно найти. Я пробовал глубокую привязку только к тем эффектам, которые мне нужны из hover.css , но это осиное гнездо, потому что эти файлы имеют нижестоящие зависимости от других частей библиотеки наведения. Очевидно, что это не относится конкретно к hover, но к любому сценарию, в котором вы хотели бы импортировать и использовать библиотеку поставщика в файле CSS компонента Angular без дублирования библиотеки.

Есть идеи?

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

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

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

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

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

span {
    display: block;
}
  

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