Unable to load scss Foundation with vue.js v3

Question

At the root of my project I added vue.config.js with:

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [path.resolve(__dirname, './../node_modules/foundation-sites/dist/scss/foundation.scss')]
    }
  }
};

It did not seem to load it (when I make errors in the code it doesn't complain).

So I decided to put it in App.vue:

<script>
// Components
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'

// Mocks
import jPrices from '../data/jprices.staging.mock.js'

export default {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: ['./../node_modules/foundation-sites/dist/scss/foundation.scss']
    }
  },
  components: {
    AppHeader,
    AppFooter
  },
  data () {
    return {
      jPrices
    }
  }
}
</script>

I still get this error:

SassError: Undefined variable: "$medium-gray".
        on line 24 of /usr/src/j/src/App.vue
>>   border: 1px solid $medium-gray;

But it is in the foundation sass file.

Also if I give the wrong path I don't get a wrong path error.

E.g. (wrong path):

'./../node_modules/foundation-sites/dist/scss/foundation.s'

I also tried (in App.vue):

import './../node_modules/foundation-sites/scss/foundation.scss'
import './../node_modules/foundation-sites/scss/_global.scss'

How do I get it to load Foundation scss file?

vue.js version 3 Zurb Foundation version 6 Node version 15