How can add custom new theme color without touching bootstrap variable.scss?

Please note I can update the existing color successfully, but I couldn't add new theme color in that same way 

**File structure** 

```
@import 'custom_variables';
@import './bootstrap/bootstrap'; 
@import './pages/home';

```

**custome\_variables.scss**

```
$theme-colors: (
    "primary": #2c67f4, // successfully edited existing color  
    "danger": #ff4136,
    "custom" : "red" // not working when adding new color theme
);

```

**Tried with code but no luck**

```
$theme-colors: map-merge(
  (
    "custom":  "red",
  ),
  $theme-colors
);

```

[Reference](https://getbootstrap.com/docs/4.0/getting-started/theming/#add-to-map)