Angular 17中引入Bootswatch至styles.scss时出现解析错误求助

问题原因 #

错误提示里的路径../node_modules/bootswatch/dist/cyborg||file:https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap是明显的格式错误——本地路径和远程URL被错误地用||拼接，Angular 17默认使用的Vite构建工具无法识别这种语法，大概率是Bootswatch Cyborg主题的bootswatch.scss文件里的字体导入行出现了问题。

修复步骤 #

方法1：手动修正主题文件 #

• 找到node_modules/bootswatch/dist/cyborg/bootswatch.scss文件
• 定位到包含||file:的导入行，将错误语句：

  @import url("../node_modules/bootswatch/dist/cyborg||file:https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
  

  替换为直接导入远程字体的正确写法：

  @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
  

• 保存文件后重新运行ng serve

方法2：锁定Bootswatch兼容版本 #

如果不想手动修改node_modules文件，可以尝试降级到无此问题的版本：

1. 卸载当前版本：

   npm uninstall bootswatch
   

2. 安装指定兼容版本（如5.3.2，经测试该版本Cyborg主题无此问题）：

   npm install bootswatch@5.3.2 --save-dev
   

3. 重新运行ng serve

方法3：通过Angular配置替代手动导入 #

在angular.json的build.options.styles数组中添加Bootswatch主题路径，让构建工具自动处理：

"styles": [
  "node_modules/bootswatch/dist/cyborg/variables.scss",
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootswatch/dist/cyborg/bootswatch.scss",
  "src/styles.scss"
]

之后移除styles.scss中的手动导入语句，重新运行ng serve

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