Vite是否无法在Vue文件的CSS/SCSS部分解析~assets类别名？

核心差异：Vite与Webpack的CSS资源解析逻辑不同 #

在Webpack版本的Quasar CLI中，~是约定的别名前缀，解析器会识别~assets并映射到对应资源目录。但Vite的CSS资源解析逻辑和Webpack存在明显区别：

• JS/模板中的~assets能生效：因为Quasar CLI Vite已经在Vite的resolve.alias中配置了~assets指向src/assets，Vite对JS和Vue模板中的路径解析会遵循这个别名规则。
• CSS中的~assets失效：Vite的CSS解析器默认不会把~当作别名前缀，而是将~assets视为路径的一部分（比如当前文件目录下的~assets文件夹），自然找不到对应资源。

为什么去掉~能正常生效？ #

这不是偶然，是Vite的正常行为：Quasar Vite项目中，src/assets被配置为静态资源目录，Vite会自动识别CSS中以assets/开头的路径，将其解析为项目根目录下src/assets中的资源，所以直接写url("assets/quasar-logo-vertical.svg")可以正常加载。

两种解决方案 #

方案1：直接移除CSS中的~前缀（推荐）

修改CSS代码如下，符合Vite的使用习惯：

.bg-quasar-logo {
  width: 200px;
  height: 200px;
  background: center / contain no-repeat #f345aa url("assets/quasar-logo-vertical.svg");
}

方案2：配置Vite的CSS别名（保留~assets写法）

如果习惯使用~assets前缀，可以在quasar.config.js中单独配置CSS的解析别名，让Vite在处理CSS时识别这个前缀：

// quasar.config.js
module.exports = function () {
  return {
    // ...其他项目配置
    build: {
      vite: {
        css: {
          resolve: {
            alias: {
              '~assets': '/src/assets'
            }
          }
        }
      }
    }
  }
}

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