Положение:
- В этом проекте должны использоваться сторонние CSS-файлы.
- CSS-файлы используют относительные пути в URL-адресах изображений (например, url ('../ images / logo.png')
- эти файлы постоянно обновляются провайдером (поэтому нельзя переписывать пути каждый раз, когда происходит обновление)
- они должны использоваться в проекте Angular6 / SCSS
Пример структуры:
- src
| - styles.scss
| - app
| - assets
|- third-party
| |- styles
| | |- general.scss
| |- images
| | |- logo.png
| |- import.scss
|- styles/
|- images/
angular.json ссылается на две таблицы стилей:
"styles": [
"src/assets/third-party/imported.scss",
"src/styles.scss"
],
Подробнее
- В сторонней папке / styles есть много файлов, поэтому «import.scss» был написан для ограничения количества таблиц стилей, добавленных в Angular.json
- сторонние файлы scss также могут находиться в своих собственных подпапках (yay), поэтому нельзя хранить import.scss в папке
thrid-party/styles
Проблема
- general.scss (и все другие братья и сестры) ссылаются на изображения (и шрифты) через родственные пути, например,
url('../images/logo.png');
- , если пути не изменены (например, сделаны относительно import.scss) ИЛИ все сторонние файлы / стили добавлены в cli (angular.json), относительные пути выдают ошибку. См. Ошибку ниже.
сообщение об ошибке:
Can't resolve '../images/logo.png' in '<project root>\src\assets\third-party\'
Какой рекомендуемый подход к этому? Импортируйте все сторонние таблицы стилей в угловой файл cli / angular.json ИЛИ импортируйте / включите их в промежуточный файл "баррель", например import.scss
NB. Я знаю, что эта тема породила множество тем, но я не нашел ответа, который был бы либо чистым "нет", либо чистым исправлением.