close

[Solved] Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$”

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error To Solve Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$” Error in angular. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$” Error occurs?

I am just migrated my angular 6 project to angular 12 and now I am facing following error.

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;
        ╵       ^

How To Solve Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$” Error ?

  1. How To Solve Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$” Error ?

    To Solve Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$” Error Just remove from this assets any non-processed stylesheets and just leave them under styles config on the angular.json and second solution is 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.

  2. Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$”

    To Solve Warning: Css Minimizer Plugin: > assets/…/variables.scss:6:0: warning: Unexpected “$” Error Just remove from this assets any non-processed stylesheets and just leave them under styles config on the angular.json and second solution is 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.

Solution 1

Just remove from this assets any non-processed stylesheets and just leave them under styles config on the angular.json.

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

Solution 2

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

Solution 3

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.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read