Laravel GlobalVueStyles:不适用于vue组件中的全局Sass

我正在尝试将全局sass变量文件加载到我的Vue样式标记中。如果我对globalVueStyles的理解正确，这应该表明每个组件样式中都包含一个文件。但是当我设置它时，它似乎什么都不做，当我运行

npm-run-dev

时，我得到一个未定义的变量错误

以下是我的laravel混合代码：

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/main.scss', 'public/css')
    .options({
        extractVueStyles: true,
        globalVueStyles: 'resources/sass/utils/_variables.scss',
    })
    .version()

完成此操作后，我认为我应该可以通过以下操作访问.vue文件中的变量：

<template>
    <h1>Example Component hi test</h1>
</template>

<script>
export default {

}
</script>
    
<style lang="scss">
    h1 {
        font-size: 50px;
        color: $blue;
    }
</style>

我确信我遗漏了一些东西，但如果能在这方面提供任何帮助，我将不胜感激。

我是从

他们似乎升级了语法。文档可在此处找到：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
4 │    color: $blue;
  │           ^^^^^
  ╵
  resources/js/components/HelloWorld.vue 4:11  root stylesheet