How to properly resolve theme assets using ember-cli-less?
Build file specifies:
fonts: 'assets/themes/default/assets/fonts'
and writes them there accordingly.
However, Semantic is looking the the wrong path, outside of assets folder, and 404s for fonts, et.c
/themes/default/assets/fonts/icons.ttf
SemanticUI: {
// These flags allow you do turn on or off auto imports for Semantic UI
import: {
css: false,
javascript: true,
image: true,
fonts: true
},
// These settings allow you to specify the source of the Semantic files
source: {
css: 'bower_components/semantic-ui/dist',
javascript: 'bower_components/semantic-ui/dist',
images: 'bower_components/semantic-ui/dist/themes/default/assets/images',
fonts: 'bower_components/semantic-ui/dist/themes/default/assets/fonts'
},
// These settings allow you to specify the destination of the Semantic files
// This only applies to images and fonts, since those are assets
destination: {
images: 'assets/themes/default/assets/images',
fonts: 'assets/themes/default/assets/fonts'
}
}
If I change theme.config to use material theme for everything:
Semantic is looking not only outside of assets, but also for the material subfolder: /themes/material/assets/fonts/icons.woff
and fonts are written into default theme instead of material folder: assets/themes/default/assets/fonts
WORK AROUND: for default theme: (build file)
destination: {
images: 'themes/default/assets/images',
fonts: 'themes/default/assets/fonts'
}
However, same work around doesn't work if using material theme for all settings in themes.config.
eg.
destination: {
images: 'themes/material/assets/images', //defaults to: 'assets/themes/default/assets/images', but semantic isn't looking there.
fonts: 'themes/material/assets/fonts'
}
The font files are loaded, eg. /themes/material/assets/fonts/icons.woff2
, however they aren't display, just a square icon shows up instead.
The CSS compiled seems to match however.
@font-face {
font-family: 'Icons';
src: url("../../themes/material/assets/fonts/icons.eot");
src: url("../../themes/material/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("../../themes/material/assets/fonts/icons.woff2") format('woff2'), url("../../themes/material/assets/fonts/icons.woff") format('woff'), url("../../themes/material/assets/fonts/icons.ttf") format('truetype'), url("../../themes/material/assets/fonts/icons.svg#icons") format('svg');
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
}
IDEALLY, shouldn't the CSS always get compiled to match the :destination: in the build-config, or perhaps have the :destination: generated based on the current theme?
Setup references:
https://github.com/nathanpalmer/example-semantic-ui-ember-cli
http://semantic-org.github.io/Semantic-UI-Ember/#/modules/usage