javascript - 使用 VueJS 进行 Sass 奇怪的导入

Question

我正在使用 VueJS 3、sass-loader (dart-sass) 10.2.0，我只有两个文件（位于同一个文件夹中） - vue 组件和 .scss 文件，其中包含变量列表和一些调试样式规则。问题是它奇怪地导入：类选择器不起作用，* 选择器起作用，但如果我使用变量 - 它就变成了一个字符串。这是我的文件中的内容：

主文件

$large: 56px;

.zxc {
  height: 40px;
}

* {
  height: $large;
}

按钮.vue

<template>
  <button class="zxc">
    zxczxczxc
  </button>
</template>

<style lang="scss">
@import url('./main.scss'); 
</style>

这就是它在 devtools 中的样子

注意：我使用旧版本的 sass-loader 因为它在默认版本中抛出奇怪的错误。我还尝试了 10.2.0 和 7.1.0 版本的 sass-loader。