При переходе на angular v15.2.9 пользовательский CSS выдает ошибку
«Я новичок в этих частях миграции, но при обновлении версий Angular я сталкиваюсь с этими проблемами.
./src/app/app.comComponent.scss?ngResource — Предупреждение: Предупреждение модуля (из ./node_modules/sass-loader/dist/cjs.js): Вероятно, вы не имеете в виду использовать здесь значение белого цвета в интерполяции. . В конечном итоге он может оказаться белым, что, скорее всего, приведет к недопустимому CSS. Всегда заключайте названия цветов в кавычки при использовании их в качестве строк или ключей карты (например, «белый»). Если вы действительно хотите использовать здесь значение цвета, используйте «»» + $color.
node_modules/bootstrap/scss/_root.scss 4:9 @importnode_modules/bootstrap/scss/bootstrap.scss 11:9 @importsrc/styles.scss 7:9 @import src/app/app.comComponent.scss 1:9 корневая таблица стилей
./src/app/app.comComponent.scss?ngResource — Предупреждение: предупреждение модуля (из ./node_modules/sass-loader/dist/cjs.js): вы, вероятно, не хотите использовать здесь значение желтого цвета в интерполяции. . В конечном итоге он может быть обозначен желтым цветом, что, скорее всего, приведет к недопустимому CSS. Всегда заключайте названия цветов в кавычки при использовании их в качестве строк или ключей карты (например, «желтый»). Если вы действительно хотите использовать здесь значение цвета, используйте «»» + $color.
node_modules/bootstrap/scss/_root.scss 4:9 @importnode_modules/bootstrap/scss/bootstrap.scss 11:9 @importsrc/styles.scss 7:9 @import src/app/app.comComponent.scss 1:9 корневая таблица стилей
./src/app/app.comComponent.scss?ngResource — Предупреждение: предупреждение модуля (из ./node_modules/sass-loader/dist/cjs.js): 1 повторяющееся предупреждение об устаревании опущено. Запустите в подробном режиме, чтобы увидеть все предупреждения.
нулевой
./src/app/auth/reset-password/reset-password.comComponent.scss?ngResource — Предупреждение: предупреждение модуля (из ./node_modules/sass-loader/dist/cjs.js): прекращение использования / для разделения вне Calc() устарел и будет удален в Dart Sass 2.0.0.
Рекомендация: math.div(2em, 14) или Calc(2em/14)
Дополнительная информация и автоматический перенос:
node_modules/font-awesome/scss/_list.scss 14:9 @importnode_modules/font-awesome/scss/font-awesome.scss 12:9 @importsrc/styles.scss 9:9 @import src/app/comComponents/ navbar/navbar.comComponent.scss 3:9 @importsrc/app/auth/reset-password/reset-password.comComponent.scss 2:9 корневая таблица стилей
./src/app/auth/reset-password/reset-password.comComponent.scss?ngResource — Предупреждение: предупреждение модуля (из ./node_modules/sass-loader/dist/cjs.js): прекращение использования / для разделения вне Calc() устарел и будет удален в Dart Sass 2.0.0.
Рекомендация: math.div(3em, 4) или Calc(3em/4)
Дополнительная информация и автоматический перенос:
node_modules/font-awesome/scss/_larger.scss 7:17 @importnode_modules/font-awesome/scss/font-awesome.scss 10:9 @importsrc/styles.scss 9:9 @import src/app/comComponents/ navbar/navbar.comComponent.scss 3:9 @importsrc/app/auth/reset-password/reset-password.comComponent.scss 2:9 корневая таблица стилей
./src/app/auth/reset-password/reset-password.comComponent.scss?ngResource — Предупреждение: предупреждение модуля (из ./node_modules/sass-loader/dist/cjs.js): прекращение использования / для разделения вне Calc() устарел и будет удален в Dart Sass 2.0.0.
Рекомендация: math.div(4em, 3) или Calc(4em/3)
Дополнительная информация и автоматический перенос: https://sass-lang.com/d/slash-div .https://sass-lang.com/d/slash-div .https://sass-lang.com/d/slash-div .
node_modules/font-awesome/scss/_larger.scss 6:15 @importnode_modules/font-awesome/scss/font-awesome.scss 10:9 @importsrc/styles.scss 9:9 @import src/app/comComponents/ navbar/navbar.comComponent.scss 3:9 @importsrc/app/auth/reset-password/reset-password.comComponent.scss 2:9 корневая таблица стилей
это мой 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?`