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

Question

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

Answer 1

Your problem is related to processing of the scss file. This problem is detailed in the 67607413. In shortly, If scss files are removed or omitted from assets folder, this problem will be solved. I preferred omitting SCSS files.

"assets": [
    "src/favicon.ico",
    {
        "glob": "**/*",
        "input": "src/assets/",
        "ignore": ["**/*.scss"],
        "output": "/assets/"
    },
    ...
]

Answer 2

I was having the same issue, I found out that in my case the assets config on angular.json was the one to blame. Check this piece of code from the configuration:

"architect": {
    "build": {
      "builder": "ngx-build-plus:build",
      "options": {
        "aot": true,
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "tsConfig": "src/tsconfig.app.json",
        "polyfills": "src/polyfills.ts",
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
}
}

Inside the src/assets folder there was a bunch of stylesheet code, scss, less, css and it seems that the CSS Minifier just tries to handle everything there as plain CSS. The solution is to remove from this assets any non-processed stylesheets and just leave them under styles config on the angular.json. That did the trick for me, hope it helps you too!