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

Rowena

You use a custom-webpack from angular. That's where it comes from. What is the webpack configuration associated to your css loader ? – Engrail

this is micro app and i am using standard webpack configuration of single-spa-angular which is as per (singleSpaAngularWebpack = require("single-spa-angular/lib/webpack")) – Rowena

I don't have any custom webpack. I am also seeing this. – Occiput

Did you skip versions in between? – Bonilla

Do you have a sample project we can reproduce this on? If we cannot reproduce it, we cannot really come up with a fix. – Wheelsman

Answer 1

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!

Stirring

Answer 2

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/"
    },
    ...
]

Vaas

Answer 3

I had the same problem. You should change the import of 'assets/.../variables.scss' to './assets/.../variables.scss'. In my case it was in styles.scss but it can be in every .scss file.

Yusem

Answer 4

In my opinion, the problem comes from the configuration files related to single-spa-angular architecture, Although the error simply says that:

I'm trying to minify Sass css files in your project but the syntax is unknown! Perhaps I don't know anything about the syntax of Sass files!

As we can't reproduce the problem and this is a hard job to find the origin(s) of warning in SPA platforms with several configuration files but, there's a straight way to find the issue or reproduce the project on your own machine immediately that is comparing with or forking the single-spa-angular repository which is made for Angular 12. Migration from Angular 6 to 12 has some pitfalls itself however you are also trying to keep such library with hidden behaviors.

Gayn

Answer 5

Try disabling Ivy engine in tsconfig.json file:

In case if you are using some outdated package which is not compatible with Ivy.

"angularCompilerOptions": {"enableIvy": false}

Or, let's it give a try by running the following commands one by one:

In case if you are upgrading Angular 6 to Angular 12 directly then there might be some issues.

ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force
ng update @angular/core@12 @angular/cli@12 --force

Or, run just the following command:

ng update @angular/core --force

Lemonade

Thanks for the reply. I have not tried disabling Ivy yet as this seems more like a hack than a solution. I tried your suggestion to force the update. However, this did not fix the issue. – Occiput

Answer 6

As already stated ...the plugin expects CSS and not SCSS as input: https://webpack.js.org/plugins/mini-css-extract-plugin/

The angular.json would have been rather relevant ...

Estimation

Answer 7

In my package.json node-sass was missing.

So after installing latest version of node-sass

my all CSS related error got resolved pls try and keep us posted hear.

this solution should work!

npm install node-sass@latest 

Rowena

That's why I have uninstalled it and install sass but after that, I start getting an error... but if you check node-sass package page in NPM, they have release the latest version 3 months ago only. So mean time you can keep both. i think that SASS version still need more update – Rowena

or if you don't want to go with node-sass for a time being. you can keep updating your sass package. As SASS development team releasing new version very frequently you can check hear as well: npmjs.com/package/sass github.com/sass/dart-sass – Rowena

This is not solve my problem. And this library will be deprecated at future release of angular. Cons of node-sass library was explained in detail at this topic. --> .#65594619 – Vaas

Answer 8

I also faced this issue. Looks like there was some changes in ng serve. Now the production build is the default configuration.

You have to add the development options on build and serve node in angular.json

// >> projects[YOUR_PROJECT_NAME].architect.build.configurations
"configurations": {
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  },
// >> projects[YOUR_PROJECT_NAME].architect.serve
"serve": {
  "defaultConfiguration": "development",
  "configurations": {
    "development": {
      "browserTarget": "YOUR_PROJECT_NAME:build:development"
    },

Grapheme

Answer 9

For migration from Angular 11 to 12 solution was;

Add ignore to angular.json file and remove src/assets

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

Jany

Answer 10

in my case it was two(!) CssMinimizerPlugins inside singleSpaWebpackConfig.optimization.minimizer/ one aiming only css and one aiming css|scss|sass|less|styl

ive checked angular 11 webpack config and it has no CssMinimizerPlugins for css|scss|sass|less|styl

also ive checked singleSpaAngularWebpack helper. and it does not add this plugin

my workarount for excluding CssMinimizerPlugins for css|scss|sass|less|styl:

singleSpaWebpackConfig.optimization.minimizer = singleSpaWebpackConfig.optimization.minimizer
.filter(plugin => plugin.constructor.name !== 'CssMinimizerPlugin' || plugin.options?.test?.toString().indexOf('less') === -1);

Ecstatic

Answer 11

Although correct answer is provided by @Locus B. but for those who didn't get that, here is a bit more details is added. In my assets folder, there were 4 subfolders, namely css, sounds, icons and images. Providing path "src/assets" in assets causes above mentioned warnings. Modifying angular.json file will help

"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/images",
          "src/assets/icons",
          "src/assets/sounds",
          "src/favicon.ico"
        ]
}
}

Instead of src/assets, We provided path to images, sounds and icons. Leaving behind css folder. Might be helpful for someone. Thanks

Goldarn