Css 节点sass:包括字体文件作为编译过程的一部分
我正在使用node sass捆绑一个自定义主题,其中包括拉入一个Css 节点sass:包括字体文件作为编译过程的一部分,css,angular,sass,node-sass,Css,Angular,Sass,Node Sass,我正在使用node sass捆绑一个自定义主题,其中包括拉入一个\u font.scss,包括各种字体,例如: @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url("../fonts/roboto-v15-latin-300.eot"); /* IE9 Compat Modes */ src: local('Roboto Light'), local('Robot
\u font.scss
,包括各种字体,例如:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url("../fonts/roboto-v15-latin-300.eot"); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
url("../fonts/roboto-v15-latin-300.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url("../fonts/roboto-v15-latin-300.woff2") format('woff2'), /* Super Modern Browsers */
url("../fonts/roboto-v15-latin-300.woff") format('woff'), /* Modern Browsers */
url("../fonts/roboto-v15-latin-300.ttf") format('truetype'), /* Safari, Android, iOS */
url("../fonts/roboto-v15-latin-300.svg#Roboto") format('svg'); /* Legacy iOS */
}
在我最终编译的css中,我看到:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url("../fonts/roboto-v15-latin-300.eot");
/* IE9 Compat Modes */
src: local("Roboto Light"), local("Roboto-Light"), url("../fonts/roboto-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v15-latin-300.woff2") format("woff2"), url("../fonts/roboto-v15-latin-300.woff") format("woff"), url("../fonts/roboto-v15-latin-300.ttf") format("truetype"), url("../fonts/roboto-v15-latin-300.svg#Roboto") format("svg");
/* Legacy iOS */ }
但是,当我在应用程序中包含此内容(使用Angular CLI)时,它无法编译,因为它试图解析这些图像相对于我的应用程序目录的路径
e、 g
(发出的值而不是错误实例)CssSyntaxError:
/Users/robert.parker/Documents/Github/nepal ng common components/projects/ng generic components/dist/theme light.css:48:70:无法解析中的“../font/MaterialIcons Regular.woff2”
“/Users/robert.parker/Documents/Github/nepal ng common components/projects/ng generic components/dist”
在绑定css之前,我可以将fonts文件夹复制到目标dist文件夹,这是唯一的解决方案吗?或者我可以做一些类似于内联字体文件的事情,例如base64编码版本
主题目录结构:
theme-roller/
- assets
- fonts/
- sass/
- theme/
_theme.scss
_fonts.scss
- theme/
- theme.scss
theme.scss
@import '../sass/theme/_theme';
_theme.scss
@import '../_fonts';
字体是否位于assets文件夹?@JosefKatič-是的,我已使用当前设置的目录结构更新了我的问题。字体是否位于assets文件夹?@JosefKatič-是的,我已使用当前设置的目录结构更新了我的问题