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