FIXED - SassError undefined variable

Introduction

I recently was opening up a old front end project using SASS and was tasked to make a few changes.

After running the webpack build I found I got this error of SASS: sasserror undefined variable.

I was scratching my head, since I am pretty sure that the variable has been set already.

In this post I will go through the steps I went to troubleshoot and fix this bug.

The lovely error that I got after build is:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: src/sass/_global.scss
Error: Undefined variable: "$link-some-active-color".
        on line 20 of src/sass/_global.scss
>>         color: $link-some-active-color;
   ---------------^

The “SASS Error: Undefined Variable” is usually thrown when you’re trying to use a variable in your SASS/SCSS stylesheet that hasn’t been defined yet. SASS is a CSS preprocessor that allows for more advanced features such as variables, nesting, and mixins, among others.

To fix the “SASS Error: Undefined Variable”, you’ll need to:

Verify the variable name

Check your variable name: First, make sure the variable has been properly named. SASS/SCSS variables start with a $ sign. For example, $primaryColor: #333;.

Make sure it is defined

Define the variable before usage: In SASS/SCSS, variables must be defined before they are used. For instance, if you try to use $primaryColor in your code before defining it, you’ll run into this error.

Check the scope

Check your scope: In SASS/SCSS, variables are scoped to the block they are declared in. If you’ve defined a variable inside a selector, it won’t be available outside of that selector. To make a variable globally available, define it at the root level of the document.

In SASS, as in many other programming languages, variable scoping rules determine the portion of the code where a variable can be used. If a variable is defined within a block, it is only available within that block and its sub-blocks (children). This is called local scope. A variable defined outside of all blocks is in the global scope and can be accessed from anywhere in the code.

Here’s an example:

$globalColor: #333; // This is a global variable

.myClass {
  $localColor: #999; // This is a local variable
  color: $localColor; // You can use it here
  background-color: $globalColor; // You can also use the global variable here
}

.myOtherClass {
  color: $globalColor; // You can use the global variable here
  // color: $localColor; // But you can't use the local variable here! It would throw an error.
}

In this example, $globalColor is defined outside of any block, so it’s a global variable and can be used anywhere in the code. $localColor is defined inside the .myClass block, so it’s a local variable and can only be used within that block. If you uncomment the line color: $localColor; inside .myOtherClass, you would get an “Undefined variable” error because $localColor is not available in that scope.

Please note that, since SASS 3.4, if you want to alter a global variable from within a block, you need to use the !global flag:

$globalColor: #333;

.myClass {
  $globalColor: #999 !global; // This will change the global variable
}

Without the !global flag, this would create a new local variable with the same name instead of changing the global one. The !global flag tells SASS that you want to change the global variable, not create a new local one.

Make sure you are importing correctly

Import the file that contains the variable: If the variable is defined in another file, you need to ensure that the file is being imported correctly.

Here’s an example of a SASS file with a properly defined variable:

$primaryColor: #333;

body {
  background-color: $primaryColor;
}

If the variable is defined in another file, you should import it like so:

// _variables.scss
$primaryColor: #333;

// main.scss
@import 'variables';

body {
  background-color: $primaryColor;
}

Note that in the @import statement, we’re not including the underscore _ or the .scss file extension. This is standard practice in SASS/SCSS.

Remember to compile your SASS/SCSS into CSS after making these changes, since browsers can’t interpret SASS/SCSS natively.

Tips for using Bootstrap

Now if you are using Bootstrap SASS libraries then remember to keep in mind the order which you imported the SCSS files.

For example, in my recent app, I had this issue with bootstrap giving me the “SassError: Undefined variable”:

error  in ./assets/scss/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_utilities.scss 142:15  @import
  assets/scss/app.scss 14:9                           root stylesheet

The bootstrap/scss/_utilities.scss file is complaining that it could not find the variable $utilities-border-colors.

After a bit of inspection, we need to @import “~bootstrap/scss/maps” before @import “~bootstrap/scss/utilities”.

This is because our variable $utilities-border-colors is defined in bootstrap/scss/maps

Tip: @use vs @import

Keep in mind that the @use rule is not supported in Node Sass.

Node Sass was deprecated in favor of Dart Sass, which is the primary implementation of Sass and is designed to replace Ruby Sass and LibSass (Node Sass is based on LibSass).

Dart Sass supports the @use rule, as well as other newer features of the Sass language.

If you want to use @use and other new features of Sass, you should switch to Dart Sass. You can install Dart Sass with npm by running npm install sass. Once installed, you can replace node-sass with sass in your build scripts.

Summary

In this post, we went through some troubleshooting on why: SassError undefined variable comes up.

It usually means that when SASS is compiling our code to CSS it could not find the variable. This is can be caused my a range of factors, which includes: checking the variable name, making sure it is defined before you have used it, checking the scope and verifying that you are importing it correctly!