`SCSS` doesn't work after Updating from Angular 9 to Angular 10

Question

I updated my Angular application from version 9 to 10. Before updating it was working correctly. Now it's getting this error:

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";

I tried so many answers in StackOverflow and GitHub which it would not help me. I attached my Angular.JSON and 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",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": ["src/styles.css"],
                        "scripts": [],
                        "assets": ["src/favicon.ico", "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/",
            "projectType": "application",
            "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"
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "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", "scripts": { "ng": "ng", "start": "ng serve", "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" }, "private": true, "dependencies": { "@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", "clipboard": "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", "jasmine-core": "^3.5.0", "jasmine-spec-reporter": "^4.2.1", "karma": "^4.4.1", "karma-chrome-launcher": "^3.1.0", "karma-coverage-istanbul-reporter": "^2.1.1", "karma-jasmine": "^3.1.1", "karma-jasmine-html-reporter": "^1.5.2", "node-sass": "^4.14.1", "protractor": "7.0.0", "ts-node": "9.0.0", "tslint": "6.1.3", "typescript": "4.0.2" } }

Answer 1

I fixed this. I updated all my SCSS files path by manually and build it again. previously as an example there was the path like this which is completely working with a fine in angular 9.

angular 9 import

@import "custom/components";

when I using angular 10 I updated all my SCCS path to like this

@import "./custom/components";

after above-mentioned changes appear project built successfully.