Не удается загрузить глобальные переменные scss в Vue SFC

Question

Я пытался следовать этому руководству, чтобы получить доступ к глобальному файлу variables.scss во всех файлах SFC: 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 -.

Кто-нибудь имеет представление о чем это?