Vuetify not using some defined sass variables in variables.scss file

I'm trying to modify some of Vuetify's default sass variables following the instructions stated here:

https://vuetifyjs.com/en/features/sass-variables/#webpack-install

However, it appears that some of the variables which cascade down into component specific sass variables aren't being used. In fact, even defining sass variables specific to a component isn't being recognised. Therefore, only the top level, default sass variables are being used on non-component elements, with the exception of font family and size.

Example:

$border-radius-root: 20px; //works but doesn't cascade to component specific
$shadow-key-umbra-opacity: green; //works but doesn't go to components
$shadow-key-penumbra-opacity: green; //works but doesn't go to components
$shadow-key-ambient-opacity: green; //works but doesn't go to components

<div class="rounded elevation-10">Testing Div</div>
<br/>
<v-card>This is a card</v-card>

Ends up rendering like this:

Based off the Sass variable documentation, changing the default border radius and shadows should affect the v-card element as the card's defaults rely on the "root" variables. However, as you can see, it isn't.

My version stack:

• "sass": "^1.32.13",
• "sass-loader": "^10.3.1",
• "vuetify": "^2.6.10",
• "vuetify-loader": "^1.5.0"
• "webpack": "^4.43.0"

My webpack related config:

 module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'file-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: "@import 'variables.scss'"
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            // This is the path to your variables
                            additionalData: "@import 'variables.scss';"
                        },

                    }
                ]
            },
            {
                test: /\.mp3$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    ...
    plugins; ]
       new VuetifyLoaderPlugin({
            match (originalTag, { kebabTag, camelTag, path, component }) {
                if (kebabTag.startsWith('core-')) {
                    return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
                }
            }
        }),
    ]