Scss files are not compiled as css file in ionic 5 - css

Question

I am using ionic 5 with angular 8 in my project. I have introduced Sass variables SCSS files which is not getting converted into CSS. I can see only SCSS file compiled while serving with ionic serve command.
What am I doing wrong here? How to compile SCSS into CSS in live reload always. Please suggest a way. Thanks in advance.
$secondary-color: #162a38;
$base-color: #407294;
.custom-alert .alert-input {
color: $base-color !important;
}
My package.json look like below:
"dependencies":
"#angular/common": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/fire": "^5.2.3",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/free-regular-svg-icons": "^5.15.1",
"#fortawesome/free-solid-svg-icons": "^5.15.1",
"#ionic-native/base64": "^5.29.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/file": "^5.29.0",
"#ionic-native/file-chooser": "^5.29.0",
"#ionic-native/file-path": "^5.29.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.4.0",
"#ionic/core": "5.4.0",
"#ionic/storage": "^2.2.0",
"#types/jquery": "^3.5.1",
"com-badrit-base64": "^0.2.0",
"cordova": "^9.0.0",
"cordova-android": "8.1.0",
"cordova-ios": "5.1.0",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-filechooser": "^1.2.0",
"cordova-plugin-filepath": "^1.5.8",
"cordova-sqlite-storage": "^4.0.0",
"core-js": "^2.5.4",
"fast-glob": "^3.2.4",
"firebase": "^7.6.1",
"ionicons": "^5.2.3",
"jquery": "^3.5.1",
"lodash": "^4.17.20",
"ngx-quill": "^12.0.1",
"npm": "^6.13.4",
"quill": "^1.3.7",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
"devDependencies":
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic-native/camera": "^5.19.0",
"#ionic/angular-toolkit": "^2.1.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
My angular.json build scripts looks like below:
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},