The resolve/alias property in Webpack is being ignored when I bundle my app

Question

I'm having difficulty with the resolve/alias property in webpack in my Vue 3/Laravel app. I have set the alias but when I run npm run dev

My webpack.mix.cjs is:

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

module.exports = {
  // Other webpack configurations...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './resources')
    }
  }
};

The error pattern I receive is...

Module not found: Error: Can't resolve '@/components/common/Sponsors.vue' in 'C:\Documents\BPG\resources\components\tools'

The code within Sponsors.vue is:

<script setup>
import Sponsors from '@/components/common/Sponsors.vue';

Where/what is the mistake I'm making?

Thanks/Tom.