url () не ссылается на правильный файл при использовании относительных путей в импортированных файлах sass - PullRequest
Новая
       39

url () не ссылается на правильный файл при использовании относительных путей в импортированных файлах sass

0 голосов
/ 28 мая 2019

Мой проект содержит следующее:

JS-виджет с воздушным шаром и файлом SCSS, закодированным вручную * common/balloon/luciad-balloon.scss: 

...

.lcdClose {
  ...
  background-image: url("close-icon-selected.png");
}

.lcdClose:hover {
  ...
  background-image: url("close-icon.png");
}

Значок шрифта с созданным файлом CSS resources/font/luciad/style.css: 

@font-face {
  font-family: 'LuciadRIA';
  src:
    url('fonts/LuciadRIA.ttf?25o3wd') format('truetype'),
    url('fonts/LuciadRIA.woff?25o3wd') format('woff'),
    url('fonts/LuciadRIA.svg?25o3wd#LuciadRIA') format('svg');
  font-weight: normal;
  font-style: normal;
}

...

Я сейчас создаю файл темы template/css/sample-single.scss. Эта тема включает в себя несколько компонентов, в том числе два компонента, которые я упомянул.

К сожалению, я не могу сделать это: 

@import "../../resources/font/luciad/style";
@import "../../common/balloon/luciad-balloon";

Учитывая, что импорт CSS разрешает файлы URL относительно файла, в котором они были найдены, а SCSS не корректирует URL после встраивания его в sample-single.scss, URL по-прежнему относительно импортируемого файла и, следовательно, неверный. Это поведение сбивает с толку, потому что я ожидаю, что импорт SCSS будет вести себя так же, как импорт CSS в этом отношении.

Я мог бы заменить @import "../../resources/font/luciad/style" на @import "../../resources/font/luciad/style.css", учитывая, что это файл css. Поскольку на файл теперь ссылаются как на внешний файл, а не на внедренный, это решает проблему для этого конкретного файла. Однако я бы предпочел избегать внешних зависимостей и предпочесть встраивать все в мои sample-single.css.

А для @import "../../common/balloon/luciad-balloon" у меня нет такой опции. Учитывая, что это файл SCSS, я не могу использовать его в качестве внешней ссылки. Я полагаю, что мог бы решить эту проблему, используя абсолютные пути, но это уменьшает возможность повторного использования этого компонента. Он запрещает использование этого компонента в разных проектах с разными структурами папок или конфигурациями сервера.

Есть ли способ, которым я могу включить common/balloon/luciad-balloon.scss & resources/font/luciad/style.css в template/css/sample-single.scss без необходимости перезаписывать URL-адреса в значениях их свойств в абсолютные пути?

...