目前已經可以蓋過bootstrap樣式了，但不知道怎麼設定雙層的樣式。
想問怎麼設定雙層的$theme-colors呢？
例：
$theme-colors: (
primary: (
50: #E8F5E9,
100: #C8E6C9,

設定如下：
style.scss

@import "root";
@import "reset";
@import '../../node_modules/bootstrap/scss/_functions.scss';
@import '../../node_modules/bootstrap/scss/_variables.scss';
@import '../../node_modules/bootstrap/scss/mixins/_breakpoints.scss';
@import "variables";
@import "theme";
@import "utilities";
@import "function";
@import "form";
@import '../../node_modules/bootstrap/scss/bootstrap'

variables.scss

// 這樣寫單層行得通
$theme-colors: (
  "primary": #86b519,
);
// 這樣寫雙層行不通，怎麼寫才可以呢？？
$theme-colors: (
   primary: (
     50:  #E8F5E9,
     100: #C8E6C9,
     200: #A5D6A7,
     300: #81C784,
     400: #66BB6A,
     500: #4CAF50)
);

用雙層寫法會報這個錯

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: (50: #E8F5E9, 100: #C8E6C9, 200: #A5D6A7, 300: #81C784, 400: #66BB6A, 500: #4CAF50) is not a color.
   ╷
37 │   @return red($value), green($value), blue($value);
   │           ^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_functions.scss 37:11  to-rgb()
  node_modules/bootstrap/scss/_functions.scss 61:36  map-loop()
  node_modules/bootstrap/scss/_maps.scss 6:20        @import
  node_modules/bootstrap/scss/bootstrap.scss 9:9     @import
  src/scss/_style.scss 11:9                          @import
  src/styles.scss 2:9                                root stylesheet