Error with SassError: Undefined function while starting angular app

Question

I am getting error while starting angular app after successful npm install.

It shows below error -

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js ??ref--13-3!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined function. ╷ 19 │ $marker-size-third: ceil(math.div($marker-size, 3)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\progress-tracker\src\styles\progress-tracker_progress-tracker-variables.scss 19:26 @import node_modules\progress-tracker\src\styles\progress-tracker.scss 1:9

Current package-lock.json has sass and sass-loader version -

"sass": "1.26.3", "sass-loader": "8.0.2",

David Fontes · Accepted Answer · 2022-02-05 15:52:32Z

0

The version of sass that you are using do not support the mathematical function div. You are using the version 1.26.3 and that function appeared in the version 1.33.0 as you can see in their documentation.

So in order to fix your issue, you have essentially 2 possibilities.

Bump the sass version if you can (the preferable way).
Use the old (and deprecated, so be aware) / operator.

If you use the option number 2, your code would become this:

$marker-size-third: ceil( $marker-size / 3 );

edited Feb 5, 2022 at 15:52

answered Feb 5, 2022 at 15:42

David Fontes

1,5102 gold badges14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error with SassError: Undefined function while starting angular app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related