Vite初始化React中SCSS背景图不显示问题求助

问题分析 #

你遇到的核心差异是Vite与CRA（Webpack）对CSS资源的解析逻辑不同：Webpack会自动处理CSS中url()的相对路径，转换为打包后的正确资源路径；而Vite中CSS里的url()默认以当前CSS文件的物理路径为基准，打包后资源会被哈希重命名并归类到dist/assets目录，原相对路径容易失效。另外你提到元素检查时图片可点击访问，说明资源本身已被正确打包，问题出在CSS路径的解析或渲染优先级上。

解决方案 #

1. 配置路径别名（推荐）

通过Vite的别名将src目录映射为@，彻底避免层级混乱的相对路径：

• 修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

• 在SCSS中使用别名路径：

background-image: linear-gradient(to right bottom, rgba($color-dark-light, 0.5), rgba($color-dark, 0.8)), url('@/assets/img/DrunkMan.png');

2. 使用项目根目录绝对路径

直接以项目根目录为基准写绝对路径，Vite会自动解析：

background-image: linear-gradient(to right bottom, rgba($color-dark-light, 0.5), rgba($color-dark, 0.8)), url('/src/assets/img/DrunkMan.png');

3. 校验相对路径准确性

如果坚持用相对路径，务必确认SCSS文件到图片的层级关系。比如SCSS文件在src/styles/layout.scss，图片在src/assets/img/DrunkMan.png，正确的相对路径应为../assets/img/DrunkMan.png，而非../../。

4. 排查渐变遮挡问题

暂时注释掉线性渐变部分，单独测试url()是否能显示图片，排除渐变完全覆盖背景图的可能：

// 先单独测试图片加载
background-image: url('@/assets/img/DrunkMan.png');

5. 确认资源格式被Vite识别

如果图片格式特殊，在vite.config.js中添加assetsInclude配置：

export default defineConfig({
  assetsInclude: ['**/*.png'], // 根据实际图片格式调整
});

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