title: Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"
body: <p>After migrating my angular 6 project to 12.
  I am getting multiple warning in terminal</p>
  <p>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.</p>
  <p>with optimisation: true i am getting all these warnings:-</p>
  <p>Earlier same code was working fine without any warning.</p>
  <pre><code>assets/.../variables.scss - Warning: Css Minimizer Plugin:  &gt; assets/.../variables.scss:6:0: warning: Unexpected &quot;$&quot;
      6 │ $color-normal-gray:#8a8a8a;
        ╵ ^
  
  assets/.../global.scss - Warning: Css Minimizer Plugin:  &gt; 
  assets/.../global.scss:285:2: warning: Expected identifier but found &quot;.&quot;
      285 │   .dropdown-menu{
          ╵   ^
  
  assets/.../global.scss - Warning: Css Minimizer Plugin:  &gt; 
  assets/.../global.scss:255:6: warning: Expected identifier but found &quot;*&quot;
      255 │       *background-color: #d9d9d9;
          ╵       ^
  
  assets/.../master.scss - Warning: Css Minimizer Plugin:  &gt; 
  assets/.../master.scss:567:8: warning: Expected &quot;:&quot; but found &quot;{&quot;
      567 │   circle {
          ╵          ^
  </code></pre>
  <p>My Package.json is below:</p>
  <pre><code> &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/cdk&quot;: &quot;^12.2.2&quot;,
      &quot;@angular/common&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/compiler&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/core&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/forms&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/http&quot;: &quot;^7.2.16&quot;,
      &quot;@angular/material&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/platform-browser&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/router&quot;: &quot;^12.2.3&quot;,
      &quot;@fortawesome/fontawesome-free&quot;: &quot;^5.15.4&quot;,
      &quot;@ngrx/store&quot;: &quot;^6.1.0&quot;,
      &quot;@okta/okta-angular&quot;: &quot;^3.0.1&quot;,
      &quot;@okta/okta-auth-js&quot;: &quot;^4.7.1&quot;,
      &quot;angular-datatables&quot;: &quot;^0.6.4&quot;,
      &quot;angular-image-slider&quot;: &quot;0.0.8&quot;,
      &quot;autobind-decorator&quot;: &quot;^2.4.0&quot;,
      &quot;bootstrap&quot;: &quot;^4.6.0&quot;,
      &quot;core-js&quot;: &quot;^2.5.4&quot;,
      &quot;file-saver&quot;: &quot;^2.0.2&quot;,
      &quot;gulp-cli&quot;: &quot;^2.3.0&quot;,
      &quot;json-bigint&quot;: &quot;^1.0.0&quot;,
      &quot;jsrsasign&quot;: &quot;^10.3.0&quot;,
      &quot;lodash&quot;: &quot;4.17.10&quot;,
      &quot;ng-simple-slideshow&quot;: &quot;^1.2.4&quot;,
      &quot;ng2-scroll-to-el&quot;: &quot;^1.2.1&quot;,
      &quot;ng2-search-filter&quot;: &quot;^0.4.7&quot;,
      &quot;ngx-filter-pipe&quot;: &quot;^2.1.2&quot;,
      &quot;ngx-logger&quot;: &quot;3.3.11&quot;,
      &quot;ngx-order-pipe&quot;: &quot;^2.0.1&quot;,
      &quot;ngx-pagination&quot;: &quot;^3.2.0&quot;,
      &quot;pagination&quot;: &quot;file:src/app/packages/pagination-0.0.1.tgz&quot;,
      &quot;rxjs&quot;: &quot;7.3.0&quot;,
      &quot;rxjs-compat&quot;: &quot;^6.3.2&quot;,
      &quot;sass&quot;: &quot;^1.36.0&quot;,
      &quot;single-spa&quot;: &quot;^5.9.2&quot;,
      &quot;single-spa-angular&quot;: &quot;^5.0.2&quot;,
      &quot;systemjs&quot;: &quot;^6.8.3&quot;,
      &quot;true-case-path&quot;: &quot;^1.0.3&quot;,
      &quot;tslint&quot;: &quot;^6.0.0&quot;,
      &quot;xlsx&quot;: &quot;^0.17.1&quot;,
      &quot;zone.js&quot;: &quot;~0.11.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-builders/custom-webpack&quot;: &quot;^12.1.1&quot;,
      &quot;@angular-devkit/build-angular&quot;: &quot;^12.2.2&quot;,
      &quot;@angular-eslint/builder&quot;: &quot;12.3.1&quot;,
      &quot;@angular-eslint/eslint-plugin&quot;: &quot;12.3.1&quot;,
      &quot;@angular-eslint/eslint-plugin-template&quot;: &quot;12.3.1&quot;,
      &quot;@angular-eslint/schematics&quot;: &quot;12.3.1&quot;,
      &quot;@angular-eslint/template-parser&quot;: &quot;12.3.1&quot;,
      &quot;@angular/cli&quot;: &quot;^12.2.2&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;^12.2.3&quot;,
      &quot;@angular/language-service&quot;: &quot;^12.2.3&quot;,
      &quot;@ng-bootstrap/ng-bootstrap&quot;: &quot;^10.0.0&quot;,
      &quot;@types/bootstrap&quot;: &quot;^4.1.2&quot;,
      &quot;@types/jasmine&quot;: &quot;2.8.6&quot;,
      &quot;@types/jasminewd2&quot;: &quot;2.0.3&quot;,
      &quot;@types/lodash&quot;: &quot;4.14.110&quot;,
      &quot;@types/node&quot;: &quot;14.6.2&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;4.28.2&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;4.28.2&quot;,
      &quot;await&quot;: &quot;^0.2.6&quot;,
      &quot;cheerio&quot;: &quot;^1.0.0-rc.2&quot;,
      &quot;codelyzer&quot;: &quot;~4.2.1&quot;,
      &quot;eslint&quot;: &quot;^7.26.0&quot;,
      &quot;font-awesome&quot;: &quot;^4.7.0&quot;,
      &quot;fs-promise&quot;: &quot;^2.0.3&quot;,
      &quot;gulp&quot;: &quot;^4.0.2&quot;,
      &quot;gulp-inline-css&quot;: &quot;^3.3.0&quot;,
      &quot;gulp-inline-source&quot;: &quot;^4.0.0&quot;,
      &quot;htmlhint-ng2&quot;: &quot;0.0.13&quot;,
      &quot;husky&quot;: &quot;^1.3.1&quot;,
      &quot;jasmine-core&quot;: &quot;~2.99.1&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
      &quot;karma&quot;: &quot;^6.3.4&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;^2.2.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;^2.1.1&quot;,
      &quot;karma-jasmine&quot;: &quot;~1.1.1&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
      &quot;karma-junit-reporter&quot;: &quot;^1.2.0&quot;,
      &quot;mediaquery-text&quot;: &quot;1.0.7&quot;,
      &quot;ng-bullet&quot;: &quot;^1.0.3&quot;,
      &quot;protractor&quot;: &quot;^5.4.2&quot;,
      &quot;puppeteer&quot;: &quot;^1.14.0&quot;,
      &quot;sonar-scanner&quot;: &quot;^3.1.0&quot;,
      &quot;ts-node&quot;: &quot;~5.0.1&quot;,
      &quot;tslint&quot;: &quot;~5.9.1&quot;,
      &quot;tslint-sonarts&quot;: &quot;^1.9.0&quot;,
      &quot;typescript&quot;: &quot;^4.3.5&quot;
    }
  </code></pre>