Как реализовать абсолютный путь в глобальном файле S css? VueJS

Question

У меня есть следующий конфиг веб-пакета в vue .config. js:

const path = require("path");

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        "./src/styles/global.scss"
      ]
    },
    configureWebpack: {
      module: {
        rules: [{
          test: /\.svg$/,
          loader: 'vue-svg-loader'
        }]
      }
    }
  }
}

Это позволяет мне использовать стили, определенные в global.s css, во всех моих vue компонентах без каких-либо явных импортов.

Теперь проблема в том, что в global.s css я определил:

   @font-face {
    font-family: Averta-Bold;
    src: url('../assets/fonts/averta/Averta-Bold.eot'); /* IE9 Compat Modes */
    src: url('../assets/fonts/averta/Averta-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/averta/Averta-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/averta/Averta-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../assets/fonts/averta/Averta-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
}

и до сих пор без проблем использовал шрифты, пока я не создал вложенную папку в мой ./src/components, так что он стал ./src/components/dashboard/ и после того, как я создал компоненты в dashboard dir, шрифты больше не могли быть использованы / расположены, так как мне пришлось бы добавить другой "../" для URL-адрес шрифта в global.s css однако это сломает все остальные компоненты.

Как добавить абсолютные пути в global.s css? Я пробовал "@ / assets / xxxxx", но это не сработало.