FIXED - SassError undefined function

Introduction

One of the annoying things when working with SASS in front-end projects is the SassError undefined function.

This can range from functions that you have defined yourself, from in-built SASS functions or even functions from external libraries.

I recently came across this function when I was doing a division function in the in-built SASS math library.

This post I will go through the steps to trouble shoot this and the fix for it.

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

https://sass-lang.com/documentation/modules/math#div

1.26.3 and that function appeared in the version 1.33.0

Make sure you are specifying functions correctly

// _functions.scss

@function double($number) {
  @return $number * 2;
}

// main.scss

@use 'functions';

.container {
  width: functions.double(100px);  // This will compile to "width: 200px;"
}

Here, _functions.scss and main.scss need to be in the same directory. If _functions.scss is in a different directory, you would need to adjust the import path accordingly.

Tip

It’s also worth noting that Sass has moved towards @use and @forward rules for sharing variables, mixins, and functions between files in newer versions, as the @import rule is being gradually phased out.

Check the function name

Misspelled or Incorrect Function Name: The function name in your Sass or SCSS file is misspelled or incorrect. Function names in Sass are case-sensitive, so even a slight difference in capitalization can lead to an error.

Ensure that the function you are trying to use is spelled correctly, including any underscores or dashes. For example, the Sass function for changing the colour might look like this: darken($color, 10%).

If you wrote Darken($color, 10%) - Sass would throw an “Undefined function” error.

Make sure that function exists

Function Doesn’t Exist: You’re trying to use a function that doesn’t exist in the Sass language. For example, using a function that only exists in Less or another preprocessor.

The e() function is used for escaping values and preventing them from being altered during LESS’s compile time.

Here’s an example of how it can be used:

.class {
    content: e('"; display: block;"');
}

This will output:

.class {
    content: "; display: block;";
}

Make sure that the function is available in your SASS version

Function Not Available in Your Sass Version: The function you’re trying to use exists, but it’s not available in the version of Sass you’re using. You may need to upgrade your version of Sass.

Check imported libraries

Library Not Imported: You’re trying to use a function from a Sass library, such as Compass, Bourbon, or Susy, but you haven’t imported the library into your Sass or SCSS file.

Verify that the usage of the function is correct

Incorrect Function Usage: You’re not using the function correctly. This could be due to passing the wrong number of arguments, passing arguments of the wrong type, or passing arguments in the wrong order.

For example, if a function requires a color and a percentage, make sure that you are passing a color and a percentage, in that order.

Make sure the function definition is correct

Custom Function Error: If you’ve defined your own Sass functions using the @function directive, the error could be due to a problem in your function definition. This could include not defining the function before it’s used, or forgetting to include a @return statement.

Check the file path

File Path Issue: If you’re importing a file that contains the function definition, you could encounter this error if the path to the imported file is incorrect.

If you are getting a “SassError: Undefined Function” message, it means that you are trying to use a function in your Sass or SCSS file that Sass doesn’t recognize. Here are a few steps you can follow to solve this issue:

When you’re using the @use rule, the path to the file is relative to the file where you’re writing the @use rule.

Suppose you have a directory structure like this:

styles/
|
|--- base/
|    |--- _functions.scss
|
|--- components/
     |--- _button.scss
     |--- main.scss

If you want to use functions from _functions.scss inside _button.scss, you would do:

// base/_functions.scss

@function double($number) {
  @return $number * 2;
}

// components/_button.scss

@use '../base/functions';

.button {
  width: functions.double(100px);  // This will compile to "width: 200px;"
}

In this case, ‘../base/functions’ is a relative path from _button.scss to _functions.scss.

Similarly, if you want to use the same function inside main.scss, you would do:

// components/main.scss

@use '../base/functions';

.container {
  width: functions.double(100px);  // This will compile to "width: 200px;"
}

Remember, the leading underscore and file extension of the Sass partial file are omitted in the @use statement.

Update sass and sass-loader

Yes, it looks like the solution is to upgrade the versions of both sass and sass-loader to newer versions. Here’s how you can do that:

Open your package.json file in a text editor.

Locate the “dependencies” section.

Find the entries for “sass” and “sass-loader”.

It might look something like this:

"dependencies": {
    "sass": "1.22.2",
    "sass-loader": "7.1.0",
    // other dependencies...
}

Change the version numbers to match the ones you want:

"dependencies": {
    "sass": "^1.33.0",
    "sass-loader": "12.0.0",
    // other dependencies...
}

The ^ before 1.33.0 means that npm is allowed to install the latest minor/patch version of the package that is backwards-compatible with 1.33.0. So, npm could install sass version 1.33.1 or 1.34.0, but not 2.0.0.

Save your package.json file.

Run npm install in your terminal. This will read the package.json file and install/update the packages to match the versions specified in it.

Legacy option

However, if upgrading Sass is not an option, you can revert to the old and deprecated / operator.

Change this line:

$marker-size-third: ceil( div($marker-size, 3) );

To:

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

Note that using the / operator for division is deprecated and might not be supported in future versions of Sass. Therefore, upgrading to a newer version of Sass is the recommended solution.

Summary