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

You use a custom-webpack from angular. That's where it comes from. What is the webpack configuration associated to your css loader ? — Pilpo, Sep 03 '21 at 08:37
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")) — nks, Sep 03 '21 at 10:05
Do you have a sample project we can reproduce this on? If we cannot reproduce it, we cannot really come up with a fix. — realappie, Sep 09 '21 at 12:32

score 23 · Answer 1 · answered Sep 15 '21 at 22:21

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

score 18 · Accepted Answer · answered Sep 10 '21 at 14:52

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!

score 3 · Answer 3 · answered Sep 08 '21 at 10:30

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.

answered Sep 08 '21 at 10:30

denis ivanov

31
1

score 3 · Answer 4 · answered Sep 12 '21 at 11:34

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.

Salahuddin Ahmed · Answer 5 · 2021-09-09T05:09:21.550

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

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. — , Sep 09 '21 at 16:12

Martin Zeitler · Answer 6 · 2021-09-12T12:14:18.510

2

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 ...

edited Sep 12 '21 at 12:14

answered Sep 12 '21 at 12:09

Martin Zeitler

1
19
155
216

score 2 · Answer 7 · edited Jun 02 '22 at 12:43

2

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

edited Jun 02 '22 at 12:43

BuZZ-dEE

6,075
12
66
96

answered Sep 13 '21 at 12:04

nks

623
1
8
19

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 – nks Sep 13 '21 at 13:05
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: https://www.npmjs.com/package/sass https://github.com/sass/dart-sass – nks Sep 13 '21 at 13:25
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. --> .https://stackoverflow.com/questions/65594119/node-sass-usage-is-deprecated-and-will-be-removed-in-a-future-major-version – whitefang Sep 15 '21 at 21:54

score 2 · Answer 8 · answered Nov 19 '21 at 17:27

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

score 0 · Answer 9 · answered Oct 06 '21 at 14:52

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);

score 0 · Answer 10 · answered Nov 14 '22 at 13:23

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

score 0 · Answer 11 · answered Mar 21 '23 at 16:35

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

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

11 Answers11