如何在现有Angular项目中升级SCSS版本解决math.div未定义报错

你之前的操作仅升级了全局sass包，Angular项目构建时优先使用项目本地node_modules中的sass依赖，因此配置不生效，按以下步骤操作即可解决报错：

• 第一步：卸载项目本地旧的sass相关依赖，安装最新版dart-sass

# 卸载旧版本（如果之前安装了node-sass也需要一起删除）
npm uninstall node-sass sass
# 安装最新版sass到项目开发依赖
npm install sass@latest --save-dev

注意：目前官方已经停止维护node-sass，全部切换到dart-sass（也就是npm上的sass包）作为标准实现，替换后基本没有兼容性问题。

• 第二步：修改Angular项目配置启用新sass特性
  打开项目根目录的angular.json文件，找到对应项目的构建配置节点：projects > 你的项目名 > architect > build > options，添加以下sass配置：

{
  "sassOptions": {
    "implementation": "sass",
    "quietDeps": true,
    "includePaths": ["node_modules"]
  }
}

如果你的Angular版本低于13，需要同时在projects > 你的项目名 > architect > test > options节点下也添加相同的sassOptions配置。

• 第三步：清理缓存重启服务

# 删除旧的依赖锁和node_modules
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 带清缓存参数启动开发服务
ng serve --open --force

Windows系统如果执行rm命令报错，可以手动删除项目根目录的node_modules文件夹和package-lock.json文件再重新安装依赖。
如果操作后仍有报错，可以同步升级项目的sass-loader依赖到最新版：

npm install sass-loader@latest --save-dev

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