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:
