Module parse failed: Unexpected character '@' with resolve-url-loader

Question

I've been trying for a while to adjust my webpack configuration to load SVG's that are defined as background in a .scss. So far I always had the problem that the path of the .svg could not be found. Resolve-url-loader should fix this problem if I understood it correctly. After the implementation the following error occurs now:

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';

I have already tested some things seen on StackOverflow. The real problem is that images defined in the background url were not displayed in the production build. If someone can help me I would be very happy! My files and configs:

Webpack config:

  {
        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;

If you need additional information, say what you need!

Thanks a lot.