Problem following learning bootstrap-5 youtube video

[blommel17]

I am trying to follow the lesson on learning bootstrap 5 and I keep having an error where the sass compiler keeps saying I have an undefined variable when I have my project look exactly like the one in the video.

I cannot figure out this error.

If anyone has a solution or has an answer as to why this is happening I would appreciate it.

Project I am following - Learn Bootstrap 5 and SASS by Building a Portfolio Website - Full Course - YouTube

the _custom.scss file

//WHITE AND GRAY COLORS

$white:    #fff ;
$gray-100: #f8f9fa ;
$gray-200: #e9ecef ;
$gray-300: #dee2e6 ;
$gray-400: #ced4da ;
$gray-500: #adb5bd ;
$gray-600: #6c757d ;
$gray-700: #495057 ;
$gray-800: #343a40 ;
$gray-900: #212529 ;
$black:    #000;

$purple:  #6f42c1;
$pink:    #d63384;

$primary: $purple;
$secondary: $pink;



// IMPORT BOOSTRAP 5
@import "../node_modules/bootstrap/scss/bootstrap.scss";

the style.scss file

@use 'custom';

.test-1{
    color: $primary;;
}

the error in the style.css file

/* Error: Undefined variable.
 *   ,
 * 4 |     color: $primary;;
 *   |            ^^^^^^^^
 *   '
 *   scss/style.scss 4:12  root stylesheet */

body::before {
  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
      "Droid Sans Mono", monospace, monospace;
  white-space: pre;
  display: block;
  padding: 1em;
  margin-bottom: 1em;
  border-bottom: 2px solid black;
  content: "Error: Undefined variable.\a   \2577 \a 4 \2502      color: $primary;;\a   \2502             ^^^^^^^^\a   \2575 \a   scss/style.scss 4:12  root stylesheet";
}

[ILM]

you will need to share your code and a link to the tutorial so we can be able to help

[blommel17]

Will do, im taking screenshots right now

[ILM]

please avoid posting screenshots, it’s really difficult to debug from screenshots,

here how to post code:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[blommel17]

I solved it. It was me not understanding how partials worked in sass.
I fixed the issue. Sorry to have wasted your time.