Как разрешить псевдонимы в mocha-webpack для отдельных файловых компонентов laravel vue

Question

Я использую vuejs в Laravel 5.7 для создания SPA. Я использую mocha-webpack и vue-test-utils для написания некоторых тестов компонентов vue.

Похоже, что тесты не могут отработать импорт таблиц стилей в компоненты. Например: у меня есть ExampleComponent.vue, который включает в себя следующее:

</script>

<style lang="scss" scoped>

@import '@/_variables.scss';

.subpanel-control > ul > li {
    background-color: lighten($body-bg, 50);
    margin-left: 10px;
    height: 25px;
    width: 25px;
    line-height: 25px;
    color: $body-bg;
}

при запуске npm run test Я получаю следующую ошибку:

Error in ./resources/assets/js/components/Panel.vue?vue&type=style&index=0&id=21f01f46&lang=scss&scoped=true&

  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  @import '@/variables';
         ^
        Can't find stylesheet to import.
     ╷
  98 │ @import '@/variables';
     │         ^^^^^^^^^^^^^
     ╵
    stdin 98:9  root stylesheet
        in C:\Users\jjackson\Documents\projects\wave\resources\assets\js\components\Panel.vue (line 98, column 9)

Я не могу понять, почемуон не понимает псевдоним @. Вот мой webpack.mix.js:

let mix = require('laravel-mix');
const path = require('path');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/nifty.scss', 'public/css', {
        implementation: require('node-sass')
    })
    .sass('resources/assets/sass/themes/type-b/theme-ocean.scss', 'public/css')
    .less('resources/assets/less/bootstrap-4-utilities.less', 'public/css')
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve('resources/assets/sass'),
                '~': path.resolve('resources/assets/js')
            }
        }
    })
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
}

Любая помощь будет оценена