Angular 10升16、Nebular 6升9后SCSS文件问题求助

一、版本匹配确认 #

Angular版本与Nebular版本强绑定，Angular 16必须搭配Nebular 9.x版本，你选择^9.0.0是正确的，建议升级到9.x系列的最新补丁版本（如9.0.1），修复已知兼容性问题。

二、彻底解决SCSS导入错误与样式失效 #

问题根源是Nebular 9适配了Sass新的@use模块系统，同时Angular 16的sass-loader移除了对~前缀的解析支持，旧的@import语法完全失效。需按以下步骤修改：

1. 全局替换SCSS导入语法 #

• 移除所有导入路径中的~前缀
• 将所有@import替换为@use，并添加命名空间（通常用nb）
  • 旧写法：

    @import '~@nebular/theme/styles/theming';
    @import '~@nebular/theme/styles/globals';
    

  • 新写法：

    @use '@nebular/theme/styles/theming' as nb;
    @use '@nebular/theme/styles/globals' as nb;
    

2. 调整自定义主题变量引用 #

自定义主题中引用Nebular变量时，需添加命名空间前缀：

• 旧写法：

  $primary-color: #your-color;
  

• 新写法：

  nb.$primary-color: #your-color;
  

3. 修正angular.json中的样式配置 #

在angular.json的styles数组中，更新Nebular全局样式路径，移除~：

"styles": [
  "@nebular/theme/styles/globals.scss",
  "src/styles.scss"
]

4. 组件内样式导入修正 #

组件SCSS文件中导入Nebular组件样式时，同样替换为@use语法：

• 旧写法：

  @import '~@nebular/theme/styles/components/button';
  

• 新写法：

  @use '@nebular/theme/styles/components/button' as nb;
  

5. 清理缓存并重新构建 #

运行以下命令清理Angular缓存，避免旧缓存干扰：

ng clean
ng serve --open

三、补充说明 #

Nebular 9完全放弃了旧的Sass @import语法，全面切换到@use模块系统，这是为了适配Sass的模块化趋势以及Angular 16的构建工具链变化。所有涉及Nebular样式的导入都必须按上述规则修改，才能确保样式正常加载。

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