How to import Foundation breakpoint util into Vue-CLI project?

Question

Trying to import Foundation breakpoint util into Vue-CLI to be available to every component but getting error:

SassError: (small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px) isn't a valid CSS value.
   ╷
36 │ $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
   │                                    ^^^^^^^^^^^^
   ╵
  node_modules/foundation-sites/scss/util/_breakpoint.scss 36:36  @import
  src/scss/_custom.scss 4:9

My setup looks like this:

vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/scss/_custom.scss";`
      }
    }
  },
}

_custom.scss:

@import '~foundation-sites/scss/util/breakpoint';

main.js:

import Vue from 'vue'
import App from './App.vue'
import "./components";
import './scss/app.scss';

new Vue({
  render: h => h(App),
}).$mount('#app')

app.scss:

@import '~foundation-sites/scss/util/util';
@import 'global';
@import '~foundation-sites/scss/foundation';

Answer 1

My colleague managed to solve this.

1. In the project root folder created a file called .sassrc:

{
  "includePaths": [ "node_modules" ]
}

2. Removed @import '~foundation-sites/scss/util/breakpoint'; from _custom.scss.

3. Changed vue.config.js to this (importing the whole foundation lib):

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "~@/scss/_custom.scss";
          @import 'foundation-sites/scss/foundation';
        `
      }
    }
  }
}

And now breakpoints util can be used within each Vue component with scoped css.