在全局VUE3项目文件中，我规定SCSS了一个变量。
在其中一个模块中，我尝试使用它：
出现错误。
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:\Progi3\vue3-perfect-goods\src\components\headerNav.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
问题：
为什么会发生这种情况以及如何在此技术堆栈的上下文中实现任务？
PS 编辑器本身会正确选择变量的颜色：
由于您设置变量
scoped的标签中的属性，您可能会遇到错误。style但是，无论如何，您应该将它们放在一个单独的文件中，例如，_variables.scss并将其导入您需要这些变量的地方。千万不要删除scoped，以后会很难导航样式，可能会因为注意力不集中而出现问题，因此您会浪费时间调试。最好把它放在一个文件中。 https://vue-loader.vuejs.org/guide/scoped-css.html