Angular项目执行ng build报错：无法解析bootstrap-sass字体路径

这个问题我之前也碰到过，本质是bootstrap-sass自带的font-path函数在Angular的webpack构建环境下，路径被意外转义（比如你看到的%22就是转义后的双引号），导致构建工具找不到字体文件。给你几个靠谱的解决办法：

方法1：手动覆盖字体路径变量（最直接） #

在你的src/app/assets/sass/main.scss最顶部，先定义$icon-font-path变量，再导入bootstrap-sass。这样会覆盖bootstrap内部的默认路径配置，避免转义问题：

// 先设置正确的字体路径，~符号让webpack自动从node_modules里找
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
// 再导入bootstrap的样式
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

方法2：配置Angular的样式预处理器路径 #

如果方法1没生效，你可以在angular.json里配置stylePreprocessorOptions，让sass-loader能直接找到bootstrap的样式文件，同时调整路径：

1. 打开项目根目录的angular.json，找到architect -> build -> options部分
2. 添加stylePreprocessorOptions配置：

"architect": {
  "build": {
    "options": {
      // 其他现有配置...
      "stylePreprocessorOptions": {
        "includePaths": [
          "node_modules/bootstrap-sass/assets/stylesheets"
        ]
      }
    }
  }
}

3. 然后修改main.scss，直接导入bootstrap并设置相对路径（相对于scss文件的位置）：

$icon-font-path: "../fonts/bootstrap/";
@import "bootstrap";

方法3：清理构建缓存 #

有时候旧的缓存会干扰构建，试试先清理缓存再重新构建：

ng clean
ng build

这些方法应该能解决你碰到的CssSyntaxError问题，你可以先试方法1，大部分情况下都能搞定。

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