无法在Vue SFC中加载全局scss变量

Question

我试图按照本教程操作，以访问所有SFC文件中的名为variable.scss的全局文件： https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/

我的项目使用vue cli 3，因此我在vue.config.js中添加了以下属性：

{
    css: {
        loaderOptions: {
            sass: {
                data: `@import "src/assets/scss/variables.scss";`
            }
        }
    },
}

variables.scss文件如下：

// variables.scss
$purple: #5D2D8B;

我的组件样式如下：

<!-- Datepicker.vue -->
<style lang="scss" scoped>
.picker {
  color: $purple!important;
}
</style>

但是尝试使用$ purple变量时出现此错误

color: $purple!important;
        ^
Undefined variable: "$purple"

我也尝试添加style-resources-loader vue-cli插件，但是出现了同样的错误。 （尝试使用时添加了此内容）：

{
  pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                path.resolve(__dirname, 'src/assets/scss/variables.scss')
            ]
        }
  }
}

似乎在.vue文件中未应用@import语句，但在.scss文件中则应用了。

任何人都知道这是怎么回事？