I am migrating our vue app to Vue 3. The new documentation says absolute paths are left alone, and that public/static images are copied over, which is what we leverage now to serve commonly used assets (we have many so I'm not interested in refactoring these at the moment).

As part of the migration, I am hoping to add global less variables so I don't have to import our variables every time I want to do anything. It was recommended that I use https://github.com/nguyenvanduocit/vue-cli-plugin-style-resources-loader. I followed the steps:

1. Install the library vue add style-resources-loader

2. Update our vue config:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        resolve('src/assets/styles/transitions.less'),
        resolve('src/assets/styles/variables.less'),
      ]
    }
  },

But now when I start up the server, I get a myriad of errors:

ERROR in ./src/pages/setup/index.less?vue&type=style&index=0&lang=less (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/style-resources-loader/lib/index.js??clonedRuleSet-32.use[4]!./src/pages/setup/index.less?vue&type=style&index=0&lang=less) 5:36-90
Module not found: Error: Can't resolve '/static/img/logos/logo.svg'...

This particular error is in reference to an import in the less file:

.navlink-logo--white {
  background: url(/static/img/logos/logo.svg) 50% no-repeat;
}

It appears the preprocessor is trying to resolve absolute paths? How do I prevent this?