Angular 11升级至12后执行ng serve出现SassError求助

升级操作 #

执行以下命令完成Angular版本从11到12的升级：

• ng update @angular/core@12 @angular/cli@12 --force
• ng update @angular/cdk@12 @angular/material@12 --force

问题描述 #

升级完成后，执行ng serve时触发SassError，该问题在Angular 11版本中未出现。已花费两天时间排查仍未找到解决方案，恳请提供帮助。

已尝试的修复步骤 #

• 删除node_modules文件夹
• 删除package-lock.json文件
• 执行npm cache clean --force
• 执行npm rebuild node-sass --force
• 执行npm install --save-dev --unsafe-perm node-sass

错误截图 #

当前package.json内容 #

{  
  "name": "pbx-ui",  
  "version": "0.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "ng serve",    
    "build": "ng build",    
    "build-staging": "node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=staging --base-href /",    
    "build-prod": "node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=production --base-href /",    
    "build-replica": "node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=replica --base-href /",    
    "build-dev": "SET NODE_OPTIONS=--openssl-legacy-provider && node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=dev --base-href /",    
    "test": "ng test",    
    "lint": "ng lint --format json > jsonOutput.json",    
    "report": "ng-lint-report --jsonfile jsonOutput.json",    
    "ng-lint": "npm run lint && npm run report",    
    "e2e": "ng e2e",    
    "ng serve": "ng serve --port 4001",    
    "clean": "rmdir /s /q node_modules",    
    "reinstall": "npm run clean && npm install",    
    "rebuild": "npm run clean && npm install && rmdir /s /q dist && npm run build --configuration production",    
    "local": "SET NODE_OPTIONS=--openssl-legacy-provider && ng serve --hmr --port 3001 --configuration=dev"  
  },  
  "private": true,  
  "dependencies": {    
    "@angular/animations": "^12.2.17",    
    "@angular/cdk": "^12.2.13",    
    "@angular/common": "~12.2.17",    
    "@angular/compiler": "~12.2.17",    
    "@angular/core": "~12.2.17",    
    "@angular/fire": "^5.2.3",    
    "@angular/flex-layout": "~9.0.0-beta.31",    
    "@angular/forms": "~12.2.17",    
    "@angular/material": "^12.2.13",    
    "@angular/platform-browser": "~12.2.17",    
    "@angular/platform-browser-dynamic": "~12.2.17",    
    "@angular/pwa": "^0.901.3",    
    "@angular/router": "~12.2.17",    
    "@angular/service-worker": "~12.2.17",    
    "@fortawesome/angular-fontawesome": "^0.6.1",    
    "@fortawesome/fontawesome-svg-core": "^1.2.26",    
    "@fortawesome/free-solid-svg-icons": "^5.12.0",    
    "@material-extended/mde": "~2.3.1",    
    "@ng-select/ng-select": "^4.0.4",    
    "@ngrx/effects": "^9.2.0",    
    "@ngrx/store": "^9.2.0",    
    "@ngrx/store-devtools": "^9.2.1",    
    "@ngx-pwa/local-storage": "^9.0.3",    
    "@ngx-translate/core": "^11.0.1",    
    "@swimlane/ngx-graph": "^7.2.0",    
    "@types/sharedworker": "0.0.29",    
    "angularx-qrcode": "~2.3.5",    
    "chart.js": "^2.9.4",    
    "chartjs-plugin-datalabels": "^0.7.0",    
    "crypto-js": "^4.1.1",    
    "d3": "^6.0.0",    
    "d3-shape": "^1.3.5",    
    "fast-xml-parser": "^3.21.1",    
    "file-saver": "^2.0.2",    
    "firebase": "^7.6.0",    
    "luxon": "^1.23.0",    
    "moment-timezone": "^0.5.43",    
    "ng-pick-datetime": "^7.0.0",    
    "ng-push-ivy": "^1.0.8",    
    "ng2-charts": "^2.3.0",    
    "ng6-breadcrumbs": "^1.0.7",    
    "ngx-color-picker": "^8.2.0",    
    "ngx-dropzone": "^2.2.2",    
    "ngx-gallery-9": "^1.0.6",    
    "ngx-google-places-autocomplete": "^2.0.3",    
    "ngx-infinite-scroll": "^10.0.1",    
    "ngx-socket-io": "~3.2.0",    
    "ngx-toastr": "^11.2.1",    
    "ngx-ui-loader": "^9.1.1",    
    "ngx-ui-switch": "^9.0.2",    
    "primeicons": "^2.0.0",    
    "primeng": "~9.1.3",    
    "rxjs": "~6.5.3",    
    "sip.js": "^0.15.11",    
    "sweetalert2": "^9.17.2",    
    "ts-md5": "^1.2.7",    
    "tslib": "^2.0.0",    
    "util": "^0.12.5",    
    "uuid": "^9.0.0",    
    "xlsx": "^0.15.3",    
    "zone.js": "~0.11.4"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "~12.2.18",    
    "@angular/cli": "~12.2.18",    
    "@angular/compiler-cli": "~12.2.17",    
    "@angular/language-service": "~12.2.17",    
    "@types/jasmine": "~3.3.8",    
    "@types/jasminewd2": "~2.0.3",    
    "@types/luxon": "^1.22.0",    
    "@types/node": "~9.6.61",    
    "codelyzer": "^5.0.0",    
    "jasmine-core": "~3.5.0",    
    "jasmine-spec-reporter": "~5.0.0",    
    "karma": "~6.4.4",    
    "karma-chrome-launcher": "~3.1.0",    
    "karma-coverage-istanbul-reporter": "~3.0.2",    
    "karma-jasmine": "~4.0.0",    
    "karma-jasmine-html-reporter": "^1.5.0",    
    "ng-lint-report": "^0.2.0",    
    "protractor": "~7.0.0",    
    "ts-node": "~7.0.0",    
    "tslint": "~6.1.0",    
    "typescript": "4.3.5"  
  }
}

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