`I am very much new at these migration parts, while updating angular versions I am facing these issues.
./src/app/app.component.scss?ngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): You probably don't mean to use the color value white in interpolation here. It may end up represented as white, which will likely produce invalid CSS. Always quote color names when using them as strings or map keys (for example, "white"). If you really want to use the color value here, use '"" + $color'.
node_modules/bootstrap/scss/_root.scss 4:9 @import node_modules/bootstrap/scss/bootstrap.scss 11:9 @import src/styles.scss 7:9 @import src/app/app.component.scss 1:9 root stylesheet
./src/app/app.component.scss?ngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): You probably don't mean to use the color value yellow in interpolation here. It may end up represented as yellow, which will likely produce invalid CSS. Always quote color names when using them as strings or map keys (for example, "yellow"). If you really want to use the color value here, use '"" + $color'.
node_modules/bootstrap/scss/_root.scss 4:9 @import node_modules/bootstrap/scss/bootstrap.scss 11:9 @import src/styles.scss 7:9 @import src/app/app.component.scss 1:9 root stylesheet
./src/app/app.component.scss?ngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): 1 repetitive deprecation warnings omitted. Run in verbose mode to see all warnings.
null
./src/app/auth/reset-password/reset-password.component.scss?ngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(2em, 14) or calc(2em / 14)
More info and automated migrator: https://sass-lang.com/d/slash-div
node_modules/font-awesome/scss/_list.scss 14:9 @import node_modules/font-awesome/scss/font-awesome.scss 12:9 @import src/styles.scss 9:9 @import src/app/components/navbar/navbar.component.scss 3:9 @import src/app/auth/reset-password/reset-password.component.scss 2:9 root stylesheet
./src/app/auth/reset-password/reset-password.component.scss?ngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(3em, 4) or calc(3em / 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
node_modules/font-awesome/scss/_larger.scss 7:17 @import node_modules/font-awesome/scss/font-awesome.scss 10:9 @import src/styles.scss 9:9 @import src/app/components/navbar/navbar.component.scss 3:9 @import src/app/auth/reset-password/reset-password.component.scss 2:9 root stylesheet
./src/app/auth/reset-password/reset-password.component.scss?ngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(4em, 3) or calc(4em / 3)
More info and automated migrator: https://sass-lang.com/d/slash-div
node_modules/font-awesome/scss/_larger.scss 6:15 @import node_modules/font-awesome/scss/font-awesome.scss 10:9 @import src/styles.scss 9:9 @import src/app/components/navbar/navbar.component.scss 3:9 @import src/app/auth/reset-password/reset-password.component.scss 2:9 root stylesheet
this is my package.json
{
"name": "anchor-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng node --max_old_space_size=2192 serve ",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"@angular/animations": "^15.2.9",
"@angular/cdk": "^15.2.9",
"@angular/cli": "^15.2.9",
"@angular/common": "^15.2.9",
"@angular/compiler": "^15.2.9",
"@angular/core": "^15.2.9",
"@angular/forms": "^15.0.0",
"@angular/language-service": "^15.2.9",
"@angular/material": "^15.0.4",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.2.9",
"@auth0/angular-jwt": "^5.0.2",
"@azure/msal-angular": "^2.5.7",
"@azure/msal-browser": "^2.37.0",
"@canvasjs/charts": "^3.7.10",
"@mdi/font": "^5.9.55",
"@ng-bootstrap/ng-bootstrap": "^14.1.0",
"@ng-idle/core": "^11.1.0",
"@ng-idle/keepalive": "^11.0.3",
"@ng-select/ng-select": "^10.0.4",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@popperjs/core": "^2.11.6",
"@swimlane/ngx-charts": "^17.0.0",
"@types/canvasjs": "^1.9.8",
"angular2-multiselect-dropdown": "^5.0.4",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.3",
"compass-mixins": "^0.12.10",
"core-js": "^3.19.3",
"country-state-city": "^3.0.1",
"crypto-js": "\~3.3.0",
"datatables.net": "^1.13.2",
"font-awesome": "^4.7.0",
"jquery": "^3.7.0",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.7.6",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"mouseleave": "^1.0.0",
"ng-idle": "^1.3.2",
"ng-multiselect-dropdown": "^0.3.4",
"ng2-charts": "^2.4.2",
"ngx-bootstrap": "^10.2.0",
"ngx-timeago": "^2.0.0",
"ngx-toastr": "^16.2.0",
"ngx-toggle-switch": "^2.0.5",
"node": "^18.16.1",
"node-modules": "^1.0.1",
"postcss-loader": "^7.3.2",
"rxjs": "\~7.4.0",
"sass": "^1.58.1",
"tslib": "^2.3.0",
"zone.js": "\~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.9",
"@angular/compiler-cli": "^15.2.9",
"@angular/localize": "^15.2.9",
"@types/crypto-js": "^4.1.1",
"@types/jasmine": "\~4.3.0",
"@types/jasminewd2": "\~2.0.8",
"@types/jquery": "^3.5.5",
"@types/lodash": "^4.14.166",
"@types/node": "\~13.1.8",
"codelyzer": "\~5.2.1",
"jasmine-core": "\~4.1.0",
"jasmine-spec-reporter": "\~4.2.1",
"karma": "\~6.3.0",
"karma-chrome-launcher": "\~3.1.0",
"karma-coverage-istanbul-reporter": "\~2.1.1",
"karma-jasmine": "\~5.0.0",
"karma-jasmine-html-reporter": "^1.5.1",
"protractor": "\~7.0.0",
"ts-node": "\~8.6.2",
"tslint": "\~6.1.3",
"typescript": "\~4.8.0"
}
}```
I need to resolve these CSS issues, ngbootstrap doesn't work in 15.2.9, is there any alternative?`