Vite 4无框架项目中CSS url()路径解析异常求助

我有一个使用原生JS、无框架的Vite 4项目，在CSS的url()中引用资源时会抛出404错误，但相同路径在HTML的img标签src属性里能正常工作。试过Vue的解决方案但不知道怎么用到无框架项目里，直接在index.js导入资源也没效果。

相关代码与项目结构如下：

_search-input.scss 代码 #

.search-input {
  width: 100%;
  background-image: url("../../assets/icons/search.svg");
}

index.js 代码 #

import "./styles/index.scss"

console.log("index file")

项目结构 #

├── src/
│   ├── assets/
│   │   └── icons/
│   │       └── search.svg
│   ├── styles/
│   │   ├── components/
│   │   │   └── _search-input.scss
│   │   └── index.scss
│   └── index.js
└── index.html

奇怪的是，我把路径里的一个../去掉，改成../assets/icons/search.svg后图片就能加载了，但从_search-input.scss的位置看，明明需要向上两级到src目录才能找到assets，IDE还提示路径无法解析。想知道为什么这个“错误路径”能生效？它到底是相对于什么的？

1. 为什么“错误路径”能生效？ #

Vite处理CSS资源时，最终打包后CSS文件的输出位置才是url()路径的基准，不是源SCSS文件的位置。

在无框架Vite项目的默认配置下：

• 所有SCSS会被编译合并到最终的CSS文件，这个文件默认输出到dist/assets/目录（比如dist/assets/index.[hash].css）
• search.svg会被Vite处理后也输出到dist/assets/目录（比如dist/assets/search.[hash].svg）

编译过程中，Vite会自动修正url()里的路径，把它替换成资源最终的输出路径，所以你写的../assets/icons/search.svg虽然不符合源文件的相对位置，但最终会被Vite处理成正确的路径，自然能加载。

2. IDE提示错误的原因 #

IDE的路径提示是基于源文件的静态位置判断的，但Vite对CSSurl()的处理逻辑和IDE的分析逻辑不一样，所以IDE会报错，但实际Vite能正常解析。

3. 规范的解决方法 #

想要IDE提示正常，同时符合Vite的处理逻辑，推荐两种方式：

• 用项目根目录的绝对路径：直接写/src/assets/icons/search.svg，Vite会自动识别并处理：

  .search-input {
    background-image: url("/src/assets/icons/search.svg");
  }
  

• JS导入资源后通过CSS变量使用：在index.js里导入SVG，再用CSS变量传递给样式：

  // index.js
  import "./styles/index.scss";
  import searchIcon from "./assets/icons/search.svg";
  document.documentElement.style.setProperty("--search-icon", `url(${searchIcon})`);
  

  /* _search-input.scss */
  .search-input {
    width: 100%;
    background-image: var(--search-icon);
  }
  

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