reactjs - 模块解析失败：带有 resolve-url-loader 的意外字符“@”

Question

我一直在尝试调整我的 webpack 配置以加载在 .scss 中定义为背景的 SVG。到目前为止，我总是遇到找不到 .svg 路径的问题。如果我理解正确，Resolve-url-loader 应该可以解决这个问题。实施后，现在发生以下错误：

Module parse failed: Unexpected character '@' (5:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
You may need an additional loader to handle the result of these loaders.
> @import '../styles/Variables';

我已经测试了一些在 StackOverflow 上看到的东西。真正的问题是在后台 url 中定义的图像没有显示在生产版本中。如果有人可以帮助我，我会很高兴！我的文件和配置：

网络包配置：

  {
        include: /\.(scss|sass)$/i,
        loader: 'resolve-url-loader', 
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

scss：

 .auth-wrapper-image {
    background: url('~/images/form-cards.svg') no-repeat center;

如果您需要更多信息，请说出您的需要！

非常感谢。