Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"

After migrating my angular 6 project to 12. I am getting multiple warning in terminal

if in angular.json i set optimisation: false configuration then all issue get resolved but i don't want to make this changes it should be true only.

with optimisation: true i am getting all these warnings:-

Earlier same code was working fine without any warning.

assets/.../variables.scss - Warning: Css Minimizer Plugin: > assets/.../variables.scss:6:0: warning: Unexpected "$"
6 │ $color-normal-gray:#8a8a8a;
╵ ^

assets/.../global.scss - Warning: Css Minimizer Plugin: >
assets/.../global.scss:285:2: warning: Expected identifier but found "."
285 │ .dropdown-menu{
╵ ^

assets/.../global.scss - Warning: Css Minimizer Plugin: >
assets/.../global.scss:255:6: warning: Expected identifier but found "*"
255 │ *background-color: #d9d9d9;
╵ ^

assets/.../master.scss - Warning: Css Minimizer Plugin: >
assets/.../master.scss:567:8: warning: Expected ":" but found "{"
567 │ circle {
╵ ^


My Package.json is below:

"dependencies": {
"@angular/animations": "^12.2.3",
"@angular/cdk": "^12.2.2",
"@angular/common": "^12.2.3",
"@angular/compiler": "^12.2.3",
"@angular/core": "^12.2.3",
"@angular/forms": "^12.2.3",
"@angular/http": "^7.2.16",
"@angular/material": "^12.2.3",
"@angular/platform-browser": "^12.2.3",
"@angular/platform-browser-dynamic": "^12.2.3",
"@angular/router": "^12.2.3",
"@fortawesome/fontawesome-free": "^5.15.4",
"@ngrx/store": "^6.1.0",
"@okta/okta-angular": "^3.0.1",
"@okta/okta-auth-js": "^4.7.1",
"angular-datatables": "^0.6.4",
"angular-image-slider": "0.0.8",
"autobind-decorator": "^2.4.0",
"bootstrap": "^4.6.0",
"core-js": "^2.5.4",
"file-saver": "^2.0.2",
"gulp-cli": "^2.3.0",
"json-bigint": "^1.0.0",
"jsrsasign": "^10.3.0",
"lodash": "4.17.10",
"ng-simple-slideshow": "^1.2.4",
"ng2-scroll-to-el": "^1.2.1",
"ng2-search-filter": "^0.4.7",
"ngx-filter-pipe": "^2.1.2",
"ngx-logger": "3.3.11",
"ngx-order-pipe": "^2.0.1",
"ngx-pagination": "^3.2.0",
"pagination": "file:src/app/packages/pagination-0.0.1.tgz",
"rxjs": "7.3.0",
"rxjs-compat": "^6.3.2",
"sass": "^1.36.0",
"single-spa": "^5.9.2",
"single-spa-angular": "^5.0.2",
"systemjs": "^6.8.3",
"true-case-path": "^1.0.3",
"tslint": "^6.0.0",
"xlsx": "^0.17.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^12.1.1",
"@angular-devkit/build-angular": "^12.2.2",
"@angular-eslint/builder": "12.3.1",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/schematics": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",
"@angular/cli": "^12.2.2",
"@angular/compiler-cli": "^12.2.3",
"@angular/language-service": "^12.2.3",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@types/bootstrap": "^4.1.2",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.110",
"@types/node": "14.6.2",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"await": "^0.2.6",
"cheerio": "^1.0.0-rc.2",
"codelyzer": "~4.2.1",
"eslint": "^7.26.0",
"font-awesome": "^4.7.0",
"fs-promise": "^2.0.3",
"gulp": "^4.0.2",
"gulp-inline-css": "^3.3.0",
"gulp-inline-source": "^4.0.0",
"htmlhint-ng2": "0.0.13",
"husky": "^1.3.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.4",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"mediaquery-text": "1.0.7",
"ng-bullet": "^1.0.3",
"protractor": "^5.4.2",
"puppeteer": "^1.14.0",
"sonar-scanner": "^3.1.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"tslint-sonarts": "^1.9.0",
"typescript": "^4.3.5"
}

Continue reading...