My project contains the following :
A balloon JS widget with a hand-coded SCSS file common/balloon/luciad-balloon.scss :
...
.lcdClose {
...
background-image: url("close-icon-selected.png");
}
.lcdClose:hover {
...
background-image: url("close-icon.png");
}
An icon font with a generated CSS file 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;
}
...
I'm now creating a theme file template/css/sample-single.scss. This theme includes several components, including the two components I mentioned.
Unfortunatelty, I'm not able to do this :
@import "../../resources/font/luciad/style";
@import "../../common/balloon/luciad-balloon";
Considering a CSS import resolves the URL files relative to the file they are found in and SCSS does not adjust the URL after embedding it into sample-single.scss, the URL is still relative to the imported file and thus incorrect. This behavior is confusing, because I would expect SCSS imports to behave the same as CSS imports in this regard.
I could replace @import "../../resources/font/luciad/style" with @import "../../resources/font/luciad/style.css", considering this is a css file. Because the file is now referenced as an external file instead of embedded, this solves the issue for that particular file. However, I'd rather avoid external dependencies and prefer to embed everything in my sample-single.css.
And for @import "../../common/balloon/luciad-balloon", I do not have that option. Considering this is an SCSS file, I can not use this as an external reference. I suppose I could fix this issue by using absolute paths, but this reduces the reusability of this component. It prohibits using this component across different projects with different folder structures or server configs.
Is there a way I can include common/balloon/luciad-balloon.scss & resources/font/luciad/style.css into template/css/sample-single.scss without having to rewrite the URLs in their property values to absolute paths?
