Vue项目scss中使用url()导入图片报相对模块未找到问题咨询

问题原因 #

• 路径解析基准不统一：WebStorm校验路径时，以编写样式的文件（单文件组件内的style块、独立scss文件）的物理存储路径为基准计算相对路径，所以../video/background.gif写法可以被正确识别。但项目编译阶段，css-loader处理样式内的url资源时，以样式最终挂载的入口文件（此处为src/views/Home.vue）的路径为基准计算相对路径，如果你的scss文件没有存放在src/views目录下，两个解析基准不一致就会触发模块找不到的报错。
• 你将图片放到Home.vue同级目录后可正常运行，是因为刚好匹配了css-loader的路径解析规则，但WebStorm仍然以样式编写文件的路径为基准查找资源，所以会抛出找不到文件的提示。

解决方案 #

推荐使用项目路径别名统一路径解析规则，Vue CLI/Vite创建的项目默认配置了@别名指向src根目录，写法如下：

background-image: url('~@/video/background.gif');

规则说明：

• ~前缀用来告知css-loader该路径为模块路径，不按照普通相对路径规则解析
• @为项目预设的路径别名，固定指向src根目录，无论样式文件存放在哪个目录下，路径都从src根目录开始计算，完全避免了相对路径的基准不一致问题
  配置完成后WebStorm和编译阶段的路径解析规则完全统一，不会再出现单侧报错的问题。

如果你的video目录存放在项目public目录下，直接使用根路径写法即可：

background-image: url('/video/background.gif');

public目录下的资源不会被webpack编译处理，会直接拷贝到编译产物的根目录，直接用绝对路径访问即可。

内容的提问来源于stack exchange，提问作者dokichan