前端 - Vite打包后SCSS引用的图片路径不对，该如何解决？

Question

为什么vite打包后scss中引用的图片路径不对
vite配置如下：

build: {    rollupOptions: {      // 静态资源分类打包(部署要区分js,css,img文件夹，对应后端的配置)      output: {        chunkFileNames: 'js/[name]-[hash].js',        entryFileNames: 'js/[name]-[hash].js',        assetFileNames: (assetInfo) => {          if (extname(assetInfo.name) === '.css') {            return `css/[name]-[hash].[ext]`;          } else {            return `img/[name]-[hash].[ext]`;          }        }      }    }  }

scss文件和图片文件目录结构如下：

打包后的目录结构：

打包后的css文件中的图片引用：

打包后正确的引用路径应该是这样：url(../img/add-1bd6048f.svg)

大佬问解惑下，为什么打包后的图片引用不对。
如果可以，不改变现有的文件目录和打包后的目录结构
现有的项目文件目录要合规范，所以这样放置。
打包后的目录是部署要求要这样的结构。

Answer 1

这个图片不需要被 vite 处理的，放在 public 目录下，使用 /pic-name.svg 引入。