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