Angular 13升级后SCSS @use语句~符号无法解析node_modules路径问题

~前缀失效原因 #

Angular 13 对齐原生Sass标准调整了构建逻辑，内置的sass-loader移除了对_{前缀的默认支持。该前缀原本是webpack生态的自定义语法，不属于Sass官方规范，因此升级后原有的}开头的路径解析逻辑直接失效。

最优解决方案 #

方案1：全局配置样式预处理器路径（适配所有第三方库） #

打开项目根目录的angular.json，找到对应项目的构建配置节点，新增sass预处理器的包含路径即可，配置完成后无需加前缀或相对路径就能直接引用node_modules内的样式：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["node_modules"]
            }
          }
        },
        // ng serve本地调试需要同步配置
        "serve": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["node_modules"]
            }
          }
        },
        // 若有单元测试依赖样式，test节点也需要同步添加相同配置
        "test": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["node_modules"]
            }
          }
        }
      }
    }
  }
}

配置后引用写法：
@use 'my-angular-lib' as lib;

方案2：自研库适配标准引用规则（和Angular Material引用逻辑对齐） #

如果你希望自己开发的库也能支持直接用包名引用，不需要依赖业务项目额外配置，只需要在库的打包配置中补充两个字段即可：

1. 在库根目录的package.json中新增exports字段，声明样式的入口地址：

{
  "name": "my-angular-lib",
  "exports": {
    ".": "./src/public-api.ts",
    // 自定义样式导出入口，可根据实际需求调整路径
    "./styles": {
      "sass": "./src/styles/index.scss"
    }
  }
}

2. 在库的ng-package.json中配置assets规则，确保打包时样式文件会被输出到npm包内：

{
  "assets": [
    "./src/styles/**/*.scss"
  ]
}

配置完成后业务侧引用库样式的写法和Angular Material完全一致：
@use 'my-angular-lib/styles' as lib;

临时兼容方案（不推荐长期使用） #

如果暂时不想修改全局配置，也可以直接省略~前缀直接写包名，Angular默认构建逻辑会自动检索node_modules目录，无需手动写相对路径：
@use 'my-angular-lib' as lib;

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