scss ParseError when running "npm run build" for react website?

I am not a react developer, I do swift programing, so I am not familiar using react and am getting the below error when trying to build the app so I can deploy it.

When I look at line 1 the error is referring to, it is the code " $theme-colors: ( " so I am not sure why this line is creating an error or if it is actually referring to somewhere else in the file??

I have posted some of the code here in the file but not all of it because the file is 300+ lines long so hopefully this can be debugged from what is here.

This react-app used to build perfectly fine and it seems without doing anything it stopped working...?

Anyone know what the problem could be?

After running "npm run build" I get:

Creating an optimized production build...  
Failed to compile.  
  
./src/index.scss  
ParserError: Syntax Error at line: 1, column 25  

src/index.scss starting with line 1

$theme-colors: (        <- Line 1
  "primary": #00e1ff,
  "secondary": #353535,
  "black": #000,
  "ass": #858585,
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px,
);


$font-family-sans-serif: "Montserrat", sans-serif;

@import "~bootstrap/scss/bootstrap.scss";

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";
@import "react-responsive-carousel/lib/styles/carousel.min.css";

.mat-select-black {
  .MuiSelect-select:focus {
    background-color: transparent !important;
  }
  .MuiSelect-icon {
    color: #000000 !important;
  }
}
.mat-select-dark2 {
  .MuiSelect-select:focus {
    background-color: transparent !important;
  }
  .MuiSelect-icon {
    color: #9vvxb3 !important;
  }
}
<MORE_CODE_AVAILABLE_IF_NEEDED>