Vite无法解析SCSS中url资源问题求助（React TS项目）

实用修复步骤 #

• 校验资源相对路径准确性
  确认../../assets/chart-bar-solid.svg的相对路径与当前_index.scss文件的位置完全匹配。Vite对资源路径的解析规则和CRA存在差异，建议尝试以项目根目录为基准的绝对路径，比如url("/src/assets/chart-bar-solid.svg")（假设assets目录位于src文件夹下）。

• 配置Vite的assetsInclude选项
  在vite.config.ts中添加assetsInclude配置，明确指定需要处理的资源类型，确保SVG文件被纳入解析范围：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    assetsInclude: ['**/*.svg'], // 显式包含SVG资源
  });
  

• 通过?url后缀预导入资源（备选方案）
  如果上述方法无效，可以先在组件文件中导入SVG资源，再通过SCSS变量引用：

  1. 在React组件文件中导入资源：

     import chartBarSvg from '../../assets/chart-bar-solid.svg?url';
     

  2. 在SCSS中定义变量并使用：

     :root {
       --chart-bar-svg: url('#{chartBarSvg}');
     }
     
     .target-element {
       mask-image: var(--chart-bar-svg);
     }
     

• 确认Sass依赖配置
  检查package.json中是否安装了sass依赖（Vite不支持node-sass），如果未安装，执行npm install -D sass或yarn add -D sass完成安装：

  "devDependencies": {
    "sass": "^1.69.0"
  }
  

• 清理缓存后重新构建
  执行构建命令前，删除dist目录和node_modules/.vite缓存文件夹，避免缓存导致的路径解析异常。

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