我在React中遇到了这个奇怪的Sass错误，我不明白它与我的风格有什么关系。
以下是如何设置样式的示例：

_colours.scss
$red: red;

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

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

到目前为止，一切都运行良好，没有问题。然后我Map了一个对象数组，我要显示到页面上。我有一个图像，但它不会显示，除非我使用'require'关键字，如下所示：

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

然后突然之间我得到了这个错误

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

如果我删除了src上的“require”，错误就会消失，但是我的图片不会显示出来。"require“和我的样式有什么关系？