Контекст
У меня есть проект, который состоит из различных Angular приложений:
- project-assets : хранилище для хранения всех ресурсов проекта, таких как глобальные css и изображения,
- общая для проекта : Angular библиотека (https://angular.io/guide/creating-libraries) с общими компонентами. project-assets является одной из его зависимостей.
- project-front : Angular project, у которых есть project-assets и project-shared в их зависимостях.
Как это работает
В моем проекте , когда мне нужно использовать изображение из project-assets в качестве фона я использую:
background: url('~project-assets/images/mon-image.png');
~project-assets/ относится к node_modules/project-assets/*
После AOT Angular эта строка преобразуется в:
background: url('/mon-image.png');
Что не работает: моя проблема
Если такое же определение фона используется в project-shared :
background: url('~project-assets/images/mon-image.png');
Так как project-shared является библиотекой, скомпилированной перед использованием project-front , строка не изменяется и остается прежней (браузер не может разрешить эту, что приводит к изображение не печатается).
Я что-то пропустил? Можно ли использовать ссылку ~ с использованием библиотеки Angular?
В качестве обходного пути я определил ту же строку в стиле.s css из project-front с !important но это не чистое решение для меня:
my-component {
background: url('~project-assets/images/mon-image.png') !important;
}