rollup-plugin-sass Undefined variable

I am using a fresh copy of https://github.com/zendesk/copenhagen_theme which uses scss. When I add a new variable in manifest.json and use it, I get an error if I use it in scss.

This is how I add “brand_color_primary_button” in manifest.json. This adds it to the side option panel. No issue there.

{
  "name": "Starter master theme",
  "author": "Plement",
  "version": "1.0.2",
  "api_version": 4,
  "default_locale": "en-us",
  "settings": [
    {
      "label": "colors_group_label",
      "variables": [
        {
          "identifier": "brand_color_primary_button",
          "type": "color",
          "description": "brand_color_primary_button_description",
          "label": "brand_color_primary_button_label",
          "value": "#AE82EF"
        },

In scss is like this:

.btn {
	background-color: $brand_color_primary_button;
}

The error I am getting:

(plugin rollup-plugin-sass) Error: Undefined variable.
  ╷
7 │   background-color: $brand_color_primary_button;
  │                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  styles/_base.scss 7:21  @import
  styles/index.scss 40:9  root stylesheet
styles/index.scss

Dont know why it is happening…. Making the properties shorter is not helping.