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

user_1740116 0
Viewed 24923

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

angular sass
4 Answers

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.

user_85946090

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.

user_118695790

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

user_68951060

Remove math.div call:

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

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