How should I use the SCSS variables correctly with the VUE3 stack?

In the global file VUE3 of the project I write the SCSS variable.

Further, in one of the modules I try to use it:

I get an error.

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                  17:57:46

 error  in ./src/components/headerNav.vue?vue&type=style&index=0&id=14455714&lang=scss&scoped=true

Syntax Error: SassError: Undefined variable.
  ╷
6 │   background-color: $--color-second;
  │                     ^^^^^^^^^^^^^^^
  ╵
  E:Progi3vue3-perfect-goodssrccomponentsheaderNav.vue 6:21  root stylesheet


 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader
/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/
headerNav.vue?vue&type=style&index=0&id=14455714&lang=scss&scoped=true 4:14-455 15:3-20:5 16:22-463
 @ ./src/components/headerNav.vue?vue&type=style&index=0&id=14455714&lang=scss&scoped=true
 @ ./src/components/headerNav.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-l
oader-v16/dist??ref--1-1!./src/views/Home.vue?vue&type=script&lang=ts
 @ ./src/views/Home.vue?vue&type=script&lang=ts
 @ ./src/views/Home.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.0.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Question:
Why is this happening and how is it necessary to implement the task in the context of this technology stack?

P.S. The editor itself picks up the color of the variable correctly: