React中使用require引入图片触发Sass变量未定义错误求助

问题场景 #

我在React项目里碰到个奇怪的Sass错误，完全搞不懂它和图片引入有啥关系。之前样式设置一直正常：

• _colours.scss：

$red: red;

• _baseStyles.scss：

.wrapper {
   border: 1px solid $red;
}

• App.scss：

@import "./styles/colours";
@import "./styles/baseStyles";

后来遍历数组渲染元素时，图片没法显示，必须用require引入：

<img src={require(`${user.image.png}`)} alt={`Portrait of ${user.username}`}/> 

这时候突然弹出Sass错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
6 │ border: 1px solid $red;
│ ^^^^
╵

把src里的require去掉，错误就消失，但图片又显示不了。

核心原因：Webpack模块解析冲突 #

当你用require(${user.image.png})这种模板字符串动态引入资源时，Webpack没法在编译阶段确定具体的文件路径，会把整个相关路径范围都纳入模块解析。这时候它可能误把你的Sass文件当成图片资源的候选解析对象，直接打乱了Sass文件的导入顺序——原本App.scss里先导入_colours.scss再导入_baseStyles.scss的依赖链被破坏，_baseStyles.scss解析时找不到$red变量，自然抛出错误。

说白了就是：动态require触发了Webpack的模糊路径解析，干扰了Sass文件的正常导入逻辑。

解决办法 #

1. 固定图片路径前缀，缩小解析范围 #

把图片放在固定目录（比如src/assets/images/），给require指定明确的前缀，让Webpack只解析这个目录下的图片，避免干扰Sass文件：

// 注意把${user.image.png}改成${user.image}.png，变量只替换文件名部分
<img src={require(`../assets/images/${user.image}.png`)} alt={`Portrait of ${user.username}`}/>

2. 用ES动态import替代require（React 16.8+推荐） #

用动态import加载图片，能避免Webpack的模糊解析问题：

import { useState, useEffect } from 'react';

// 组件内
const [imageSrc, setImageSrc] = useState('');
useEffect(() => {
  import(`../assets/images/${user.image}.png`).then(img => {
    setImageSrc(img.default);
  });
}, [user.image]);

<img src={imageSrc} alt={`Portrait of ${user.username}`}/>

3. 提前构建图片映射对象 #

如果图片数量不多，可以提前把所有图片导入，用对象映射的方式获取路径：

// 新建图片映射文件，比如src/assets/imageMap.js
import user1 from './images/user1.png';
import user2 from './images/user2.png';
export const imageMap = {
  user1,
  user2
};

// 组件内使用
import { imageMap } from '../assets/imageMap';

<img src={imageMap[user.image]} alt={`Portrait of ${user.username}`}/>

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