主页 / 问题 / 1366167
Accepted
Mike Kharkov
Asked:2022-05-27 00:36:16 +0800 CST2022-05-27 00:36:16 +0800 CST

vue3 和 scss 变量不起作用

  • 772

在全局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 编辑器本身会正确选择变量的颜色：

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    由于您设置变量scoped的标签中的属性，您可能会遇到错误。style但是，无论如何，您应该将它们放在一个单独的文件中，例如，_variables.scss并将其导入您需要这些变量的地方。千万不要删除scoped，以后会很难导航样式，可能会因为注意力不集中而出现问题，因此您会浪费时间调试。最好把它放在一个文件中。 https://vue-loader.vuejs.org/guide/scoped-css.html

    • 2

相关问题