Search code examples
angularsass

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

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

Solution

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