Css 节点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

我正在使用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('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č-是的,我已使用当前设置的目录结构更新了我的问题