Vuetify SassError Expected identifier. .v-application .orange.#f77925{

Question

I am trying to manage sass variables of vuetify theme, according to doc here: https://vuetifyjs.com/en/features/sass-variables/

Here is package.json

{
  "scripts": {
    ...
  },
  "dependencies": {
    "@vue-stripe/vue-stripe": "^4.2.5",
    "agora-rtc-sdk-ng": "^4.3.0",
    "agora-rtm-sdk": "^1.4.2",
    "axios": "^0.21.1",
    "buefy": "^0.9.4",
    "core-js": "^3.6.5",
    "currency-symbol-map": "^5.0.1",
    "firebase": "^8.2.9",
    "luxon": "^1.27.0",
    "simple-vue-validator": "^0.16.0",
    "uuid": "^8.3.2",
    "vue": "2.6.14",
    "vue-carousel": "^0.18.0",
    "vue-datetime": "^1.0.0-beta.14",
    "vue-i18n": "^8.17.3",
    "vue-infinite-loading": "^2.4.5",
    "vue-router": "^3.2.0",
    "vue-tel-input": "^5.1.0",
    "vue-the-mask": "^0.11.1",
    "vue-toastification": "^1.7.11",
    "vuetify": "2.4.11",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.11",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "deepmerge": "^4.2.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "1.32.8",
    "sass-loader": "10.1.1",
    "vue-cli-plugin-i18n": "~1.0.1",
    "vue-cli-plugin-vuetify": "~2.4.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "1.7.3"
  },
  "eslintConfig": {
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I have created src/styles/variables.scss And I am getting errors below, trying to solve about 6 hours

 ERROR  Failed to compile with 2 errors                                                                                                                                                                      3:31:52 PM

 error  in ./node_modules/vuetify/src/styles/main.sass

Syntax Error: SassError: Expected identifier.
   ╷
34 │         .v-application .orange.#f77925{
   │                                ^
   ╵
  node_modules/vuetify/src/styles/generic/_colors.scss 34:32  @import
  node_modules/vuetify/src/styles/generic/_index.scss 2:9     @import
  node_modules/vuetify/src/styles/main.sass 7:9               root stylesheet


 @ ./node_modules/vuetify/src/styles/main.sass 4:14-194 15:3-20:5 16:22-202
 @ ./node_modules/vuetify/lib/presets/default/index.js
 @ ./node_modules/vuetify/lib/services/presets/index.js
 @ ./node_modules/vuetify/lib/services/index.js
 @ ./node_modules/vuetify/lib/framework.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.2:5000&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Syntax Error: SassError: Undefined variable.
   ╷
91 │   @return $background
   │           ^^^^^^^^^^^
   ╵
  node_modules/bulma/sass/utilities/functions.sass 91:11          findLightColor()
  node_modules/bulma/sass/utilities/derived-variables.sass 29:14  @import
  node_modules/bulma/sass/utilities/_all.sass 6:9                 @import
  src/styles/App.scss 3:9                                         @import
  src/App.vue 23:9                                                root stylesheet


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 15:3-20:5 16:22-424
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.2:5000&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Answer 1

It seems that you declared $orange variable in Vuetify's custom variables like so:

$orange: #f77925;

Correct way of declaring custom colors would be this (by using a map):

$orange: ("shadeName": #f77925);