Keep on getting the error message "Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable."

I am trying to add styling to my website. I have an index.scss file that reads like this:

@import '@carbon/themes/scss/themes';

$carbon--theme: $carbon--theme--g100;
@include carbon--theme();

@import 'carbon-components/scss/globals/scss/styles.scss';

a {
  color: $text-04;
}

.bx--side-nav__navigation {
  background-color: $ui-background;
}

a.bx--side-nav__link--current,
a.bx--side-nav__link--current>span.bx--side-nav__link-text {
  background-color: $ui-01;
  color: $text-04;
}

.bx--side-nav__item:not(.bx--side-nav__item--active)>.bx--side-nav__link:hover {
  background-color: $ui-01;
  color: $text-04;
}

a.bx--side-nav__link>.bx--side-nav__link-text,
.bx--side-nav__item:not(.bx--side-nav__item--active)>.bx--side-nav__link:hover>span {
  color: $text-04;
}

The entire error messages reads: ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ╷ 4 │ $carbon--theme: $carbon--theme--g100; │ ^^^^^^^^^^^^^^^^^^^^ ╵ src/index.scss 4:17 root stylesheet