Angular 10项目从node-sass切换到sass(dart-sass)时报错如何解决

步骤1：配置Angular构建工具指定sass实现 #

Angular 10 对应的 @angular-devkit/build-angular@0.1002.x 版本默认优先调用node-sass，你需要在项目根目录的angular.json中手动指定sass实现为dart-sass：

• 找到 projects > [你的项目名称] > architect > build > options 节点，新增如下配置：

"stylePreprocessorOptions": {
  "implementation": "sass"
}

• 同步给 projects > [你的项目名称] > architect > serve > options 节点添加相同配置，保证本地开发服务生效。

步骤2：适配dart-sass语法规则 #

如果报错信息包含样式语法相关提示，是因为dart-sass已弃用node-sass支持的部分旧语法，需要做如下修改：

• 项目中所有/deep/、>>>样式穿透写法，统一替换为::ng-deep，作用到局部组件建议添加:host前缀即:host ::ng-deep
• 移除所有sass文件中@import路径末尾的.scss后缀，dart-sass不允许导入声明带样式文件后缀

步骤3：调整依赖兼容版本 #

如果完成上述操作后依然报错，是当前sass版本和sass-loader、Angular构建工具不兼容导致，执行以下命令替换适配版本：

npm uninstall sass
npm install sass@1.32.13 --save-dev

替换完成后删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install后启动项目即可。

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