Angular 5 UI库添加fonts.scss字体时遇CssSyntaxError编译失败

我来帮你搞定这个字体相关的编译错误，先拆解一下核心问题，再一步步解决：

核心问题分析 #

从错误信息来看，有两个关键问题：

1. @import语句顺序违规：CSS规范要求@import必须放在所有其他规则（除了@charset）之前，你的代码里@import在@font-face之后，导致了postcss-import的警告。
2. 字体文件路径找不到：编译时在dist目录下找不到指定的字体文件，说明打包过程中没有把字体文件复制到dist目录，或者路径引用逻辑有误。

分步解决办法 #

1. 修正@import语句顺序 #

把@import移到fonts.scss的最顶部，修改后的代码如下：

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

@font-face { 
  font-family: 'bree-thin'; 
  src: url('./fonts/bree-thin/bree-thin.eot'); 
  src: url('./fonts/bree-thin/bree-thin.woff2') format('woff2'), 
       url('./fonts/bree-thin/bree-thin.woff') format('woff');
} 

@font-face { 
  font-family: 'Noto'; 
  src: url('./fonts/NotoSans-Regular.ttf'); 
  font-weight: normal; 
  font-style: normal;
}

这样就能消除postcss-import的警告。

2. 确保字体文件被正确打包到dist目录 #

Angular默认只会打包assets目录下的静态资源，所以需要配置打包规则，让字体文件被复制到dist目录：

• 如果你的字体文件在项目源码里的路径是src/assets/fonts，打开.angular-cli.json（Angular 5的配置文件），找到apps[0].assets数组，添加该路径：

  "assets": [
    "assets",
    "favicon.ico",
    "assets/fonts" // 添加这一行，确保字体文件夹被打包
  ]
  

• 如果字体文件夹和fonts.scss在同一目录（比如src/styles/fonts），则需要把这个路径也加入assets配置：

  "assets": [
    "assets",
    "favicon.ico",
    "styles/fonts"
  ]
  

3. 验证并调整字体路径 #

确认打包后，dist目录下存在fonts文件夹，并且里面有对应的字体文件。此时css里的相对路径./fonts/...就能正确找到文件。如果还是有问题，可以尝试使用绝对路径（比如/fonts/...），但要注意部署时的静态资源根路径。

4. 检查postcss-url配置（可选） #

如果项目使用了postcss-url插件，可能需要配置它来正确处理字体路径。在postcss配置文件（比如postcss.config.js）里添加规则：

module.exports = {
  plugins: {
    'postcss-url': {
      url: 'rebase', // 自动调整路径
      basePath: '../src/styles' // 根据你的源码路径调整
    }
  }
};

验证修复 #

修改完成后，重新执行打包命令：

ng build --prod

如果没有报错，说明问题已经解决。

内容的提问来源于stack exchange，提问作者rf2018