从Angular 9更新到Angular 10后，`SCSS`不起作用

问题描述

我将Angular应用程序从版本9更新到了版本10。在更新之前，它可以正常工作。现在出现此错误：

ERROR in ./src/assets/scss/argon.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/assets/scss/argon.scss)
Module build Failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
    SassError: File to import not found or unreadable: custom/alert.
            on line 5 of src/assets/scss/custom/_components.scss
            from line 65 of src/assets/scss/argon.scss
    >> @import "custom/alert";

我在StackOverflow和GitHub中尝试了很多答案，但这对我没有帮助。我附上了Angular.JSON和Package.JSON：

angular.json ：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
        "argon-dashboard-angular": {
            "root": "","sourceRoot": "src","projectType": "application","prefix": "app","schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser","options": {
                        "outputPath": "dist","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json","assets": ["src/favicon.ico","src/assets"],"styles": [
                            "src/styles.scss","src/assets/scss/argon.scss","node_modules/sweetalert2/src/sweetalert2.scss"
                        ],"scripts": [
                            "node_modules/chart.js/dist/Chart.min.js","node_modules/clipboard/dist/clipboard.min.js","node_modules/sweetalert2/dist/sweetalert2.js"
                        ]
                    },"configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                            }],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true
                        }
                    }
                },"serve": {
                    "builder": "@angular-devkit/build-angular:dev-server","options": {
                        "browserTarget": "argon-dashboard-angular:build"
                    },"configurations": {
                        "production": {
                            "browserTarget": "argon-dashboard-angular:build:production"
                        }
                    }
                },"extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n","options": {
                        "browserTarget": "argon-dashboard-angular:build"
                    }
                },"test": {
                    "builder": "@angular-devkit/build-angular:karma","options": {
                        "main": "src/test.ts","tsConfig": "src/tsconfig.spec.json","karmaConfig": "src/karma.conf.js","styles": ["src/styles.css"],"scripts": [],"src/assets"]
                    }
                },"lint": {
                    "builder": "@angular-devkit/build-angular:tslint","options": {
                        "tsConfig": ["src/tsconfig.app.json","src/tsconfig.spec.json"],"exclude": ["**/node_modules/**"]
                    }
                }
            }
        },"argon-dashboard-angular-e2e": {
            "root": "e2e/","architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor","options": {
                        "protractorConfig": "e2e/protractor.conf.js","devServerTarget": "argon-dashboard-angular:serve"
                    },"configurations": {
                        "production": {
                            "devServerTarget": "argon-dashboard-angular:serve:production"
                        }
                    }
                },"options": {
                        "tsConfig": "e2e/tsconfig.e2e.json","exclude": ["**/node_modules/**"]
                    }
                }
            }
        }
    },"defaultProject": "argon-dashboard-angular","schematics": {
        "@schematics/angular:component": {
            "styleext": "scss"
        }
    },"cli": {
        "analytics": false
    }
}

package.json ：

{ “ name”：“ argon-dashboard-angular”， “ version”：“ 1.1.0”， “脚本”：{ “ ng”：“ ng”， “ start”：“ ng服务”， “ build”：“ ng build”， “ test”：“ ng test”， “ lint”：“ ng lint”， “ e2e”：“ ng e2e”， “ install：clean”：“ rm -rf node_modules / && rm -rf package-lock.json && npm install && npm start” }， “私人”：是的， “依赖关系”：{ “ @ angular / animations”：“ 10.1.1”， “ @ angular / common”：“ 10.1.1”， “ @ angular / compiler”：“ 10.1.1”， “ @ angular / core”：“ 10.1.1”， “ @ angular / fire”：“ ^ 6.0.2”， “ @ angular / forms”：“ 10.1.1”， “ @ angular / http”：“ ^ 7.2.16”， “ @ angular / localize”：“ ^ 9.0.5”， “ @ angular / platform-browser”：“ 10.1.1”， “ @ angular / platform-browser-dynamic”：“ 10.1.1”， “ @ angular / router”：“ 10.1.1”， “ @ ckeditor / ckeditor5-angular”：“ ^ 1.2.3”， “ @ ckeditor / ckeditor5-build-classic”：“ ^ 21.0.0”， “ @ ng-bootstrap / ng-bootstrap”：“ ^ 6.0.0”， “ @ sweetalert2 / ngx-sweetalert2”：“ ^ 8.1.1”， “ angular-file-uploader”：“ ^ 7.0.1”， “ bootstrap”：“ ^ 4.5.2”， “ chart.js”：“ 2.7.3”， “剪贴板”：“ 2.0.4”， “ core-js”：“ 3.6.4”， “ firebase”：“ ^ 7.19.1”， “ ngx-clipboard”：“ 13.0.0”， “ ngx-quill”：“ ^ 12.0.1”， “ ngx-toastr”：“ 12.0.0”， “ nouiSlider”：“ 13.1.1”， “ quill”：“ ^ 1.3.7”， “ rxjs”：“ ^ 7.0.0-beta.5”， “ sass-loader”：“ ^ 10.0.2”， “ sweetalert2”：“ ^ 10.0.2”， “ tslib”：“ 2.0.1”， “ zone.js”：“ 0.11.1” }， “ devDependencies”：{ “ @ angular-devkit / build-angular”：“ 0.1001.1”， “ @ angular / cli”：“ ^ 10.1.1”， “ @ angular / compiler-cli”：“ ^ 10.1.1”， “ @ angular / language-service”：“ ^ 10.1.1”， “ @ types / jasmine”：“ ^ 3.5.8”， “ @ types / jasminewd2”：“ ^ 2.0.8”， “ @ types / node”：“ ^ 13.7.7”， “ codelyzer”：“ ^ 5.2.1”， “茉莉花芯”：“ ^ 3.5.0”， “ jasmine-spec-reporter”：“ ^ 4.2.1”， “业力”：“ ^ 4.4.1”， “ karma-chrome-launcher”：“ ^ 3.1.0”， “业力覆盖范围伊斯坦布尔记者”：“ ^ 2.1.1”， “业力茉莉花”：“ ^ 3.1.1”， “ karma-jasmine-html-reporter”：“ ^ 1.5.2”， “ node-sass”：“ ^ 4.14.1”， “量角器”：“ 7.0.0”， “ ts-node”：“ 9.0.0”， “ tslint”：“ 6.1.3”， “ typescript”：“ 4.0.2” } }

解决方法

我解决了这个问题。我手动更新了所有SCSS文件路径，然后重新构建。以前作为示例，存在这样的路径，它完全可以在角度9中很好地工作。

角度9导入

@import "custom/components";

当我使用角度10时，我将所有SCCS路径都更新为这样

@import "./custom/components";

上述更改后，项目将成功构建。

angular10 angular9 sass sass