Problem following learning bootstrap-5 youtube video

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";
}

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

Will do, im taking screenshots right now

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 (’).

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.