Sass math.div function is undefined in angular app, but is defined in angular lib

Question

I need to use Sass math.div function in my angular application. Here is the example of my SCSS code:

@use "sass:math";

div {
  min-height: math.div(100, 2);
}

I created the angular application using ng new my-application command. Also I created a library in the application using ng generate library my-lib command.

The SCSS code with math.div works fine in the library. If I put the SCSS code in projects/my-lib/src/lib/my-lib.component.scss and run ng build my-lib then the library will build successfully.

But if I put the SCSS code in src folder, for example src/app/app.component.scss and run command ng build then I get this error:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
  ╷
4 │   min-height: math.div(100, 2);
  │                 ^^^^^^^^^^^^^^^^
  ╵
  src\app\app.component.scss 4:17  root stylesheet

math.div function is available in sass since 1.33.0, so I think the problem is that angular app has different sass version from angular lib for some reason. But I don't know how to fix it.

For example min-height: math.pow(10, 2); works fine in the app. math.pow is available since 1.25.0

Sufism

I faced a similar issue, it had to do with my Node version being outdated. Simply running nvm use node (or updating node) in the command line will bump Node to the most recent version which Dart sass expects to be able to use math.div(). – Erase

math.div() was introduced in Sass 1.33.0. sass-lang.com/documentation/breaking-changes/slash-div. – Hedonism

Answer 1

In your package-lock.json file you have two components related to sass: sass itself and sass-loader. it would look something like this which represent already installed packages:

 "sass": {
  "version": "1.22.2",
  "resolved": "https://registry.npmjs.org/sass/-/sass-1.22.2.tgz",
},
"sass-loader": {
  "version": "7.1.0",
  "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz"
}

Can you bump up the version and place sass with value ^1.33.0 in package.json (Which controls packages to be installed) under dependencies and sass-loader with value 12.0.0 and re-run npm install after saving.

Stacked

There were sass 1.27.0 and sass-loader 10.0.5 in package-lock.json. I added "sass": "^1.33.0", "sass-loader": "12.0.0" in package.json dependencies and ran npm install but it did't help. Still get the error Undefined function. – Sufism

And what are current versions in package-lock.json? – Stacked

@angular-devkit/build-angular has dependencies: sass 1.27.0, sass-loader 10.0.5. In root dependencies: sass 1.34.1, sass-loader 12.0.0 – Sufism

Well it's questionable practice to manually override angular's dependencies but can you try to give same values to sass and sass-loader under build-angular – Stacked

yes, it helps. If I manually change package-lock.json and run npm install then there is no error "Undefined function". I get another error: "Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function". It looks like @angular-devkit\build-angular really needs this old sass version – Sufism

If that's the case maybe you can try to notify angular team on github? – Stacked

Answer 2

Changing the version of the sass package in the package.json file from ^1.26.5 to ^1.32.13 fixed the problem for me (Vue CLI app with TypeScript and SSR).

Furthermore, updating the sass-loader package (as mentioned in Beka Kalandadze's comment above) caused my application to brake.

Piotr

This issue is a breaking change done since Sass 1.33.0. sass-lang.com/documentation/breaking-changes/slash-div. npm install [email protected] would do. – Hedonism

@Hedonism Thanks, this is really fixed the issue. – Carthy

Answer 3

For my angular & scss project, changing @use 'sass:math' to @use 'sass:math' as math; helped.

Rattray

Answer 4

If you are using npm 8.19.2 review the "overrides" option. I solved the same problem this way.

https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

    "overrides": {
        "sass": "1.55.0"
    }

Pelage

Answer 5

Make sure you are using sass not node-sass or other flavors. Also, as the others mentioned, make sure your sass version is higher than v1.33.0.

Pepita

Answer 6

In my case, I need to change the sass version to 1.33.0 in the package-lock.json or yarn.lock.

If I change the sass-loader version to 12.0.0, I'll get the error Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function.

Because @angular-devkit/build-angular uses [email protected] which is not compatible with [email protected].

Gavette

Answer 7

For me, what helped is upgrading to these versions - "sass": "^1.59.3",    "sass-loader": "^13.2.1"

Also, in my case, the global sass version was lower than my angular project. So I had to upgrade that as well. npm i sass@^1.59.3 -g

Ruhnke

Answer 8

I tried everything obvious that was posted here. My sass and sass-loader were up to date with versions higher than what others reported in their answers.

Cause:
I had node-sass installed with sass and sass-loader. After removing node-sass and reinstalling sass everything worked.

npm remove node-sass
npm install sass

Ulbricht

Answer 9

Remove math.div call:

min-height:    math.div(100, 2);

min-height:    (100 / 2); // this solves the problem

Oedema

Please use your commenting privilege to ask clarification questions. – Venterea

I am not expert in SCSS but it seems that there is a breaking change and usage as / for division is deprecated as it will be only a separator in next versions. I don't understand it well so I can't tell but it seems to me that the proposed answer should be avoided sass-lang.com/documentation/breaking-changes/slash-div – Nowise

This is indeed deprecated and math.div solves a deprecation issue, removing it just moves the problem to the future. – Levesque