怎么解决vue3前端出现的Unknown at rule @use问题？

问题遇到的现象和发生背景

我在学习vue3框架中的sass应用时遇到了一些问题，首先是安装sass出现了问题，后来在网上搜索，发现windows系统使用sass需要安装ruby环境，安装之后确实解决了，但是在使用reset-css来初始化元素样式时出现了问题，安装reset-css 使用命令行npm install --save reset-css，结果在main.scss中使用 @use 引入reset-css进行初始化时编译出现问题：Unknown at rule @use 但是初始化的效果还是实现了，就是通过@use来引入其他模块文件中的变量和 mixin 时还是编译错误，错误原因还是Unknown at rule @use

问题相关代码，请勿粘贴截图

_base.scss文件

// 变量定义
$themeColor: #ff5100;

// @mixin
// 绝对定位
@mixin absolutePosition($top, $right) {
    position: absolute;
    top: $top;
    right: $right;
}

* {
    box-sizing: border-box;
}

main.scss文件

// 使用reset,初始化样式
@use "../../node_modules/reset-css/sass/reset"; 
// 创建一个 base 命名空间
@use "./base";

// 语法是"$+变量名"
// 定义了themeColor变量
$themeColor: #ff5100;

// 定义mixin ; 绝对定位
@mixin absolutePosition($top, $right) {
    position: absolute;
    top: $top;
    right: $right;
}

* {

    box-sizing: border-box;
}

.app-container {
    width: 37.5rem;
    
    &>header {
        height: 5rem;
        opacity: 0.8;
        background: #000000;
        position: relative;
        z-index: 99;
        padding: 0 1.2rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .logo {
            width: 5rem;
            height: 1.38rem;
        }

        .menu-icon {
            width: 2.4rem;
            height: 2.4rem;
            margin-left: auto;
        }
    }
}

/* banner部分 */
.banner-container {
    background-color: #242345;
    border-top: 2px solid $themeColor;
    color: #ffffff;
    padding: 6rem 3rem;
    position: relative;

    h1 {
        opacity: 1;
        font-size: 2.4rem;
        letter-spacing: 0;
        font-weight: 600;
    }

    h2 {
        padding: 1.6rem 0 1.2rem 0;
        opacity: 0.8;
        font-size: 1.2rem;
        letter-spacing: 0;
        font-weight: 400;
    }

    p {
        line-height: 2.4rem;
        opacity: 0.5;
        font-size: 1.2rem;
        letter-spacing: 0;
        font-weight: 400;
    }

    .banner-buttons {
        margin-top: 2.4rem;

        /* 考前辅导 */
        .tutor {
            width: 15rem;
            height: 3.6rem;
            border-radius: 4px;
            background-color: $themeColor;
            color: #ffffff;
            text-align: center;
            border: none;
            font-size: 1.4rem;
            letter-spacing: 0;
            font-weight: 600;
        }

        /* 预约考试 */
        .order {
            /* 属性继承 */
            @extend .tutor;
            background-color: #e8e8e8;
            color: #111111;
            float: right;
        }
    }

    /* 背景图片 */
    i {
        display: inline-block;
        width: 11.2rem;
        height: 19.6rem;
        z-index: 2;
        @include absolutePosition(-3.2rem, 0);
        background: url("../img/sj@3x.png") no-repeat;
        background-size: cover;
    }
}

main.css文件，只截取了出问题的部分

@charset "UTF-8";
@use "../../node_modules/reset-css/sass/reset";
@use "./base";
@use "sass:math";

运行结果及报错内容

Unknown at rule @use
图片不知道各位能不能看到，上面的就是错误提示。

我的解答思路和尝试过的方法

百度查了个遍，都没找到解决办法

我想要达到的结果

麻烦各位帮帮我吧，真的是没办法了。

sass 环境是需要按钮。sass sass-loader 这两个插件，node-sass 之类的才需要编译，最新的sass希望你安装就安装 sass