How to resolve image path in sass file using sass-loader and resol-url-loader

Question

I read the description of sass-loader and resolve-url-loader, but still can not understand why sass-loader cannot resolve the image path (url) in the sass file.

please help me how to understand this!

process.noDeprecation = true;
module.exports = {
  entry: {
    'main': path.resolve(__dirname, '../main.js')
  },
  devtool: '#source-map',
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, '../../dist'),
    sourceMapFilename: "[file].map"
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader', options: { sourceMap: true } },
          ],
          fallback: "style-loader",
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            { loader: 'css-loader', options: { sourceMap: true }  },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader', options: { sourceMap: true } },
            { loader: 'postcss-loader', options: { sourceMap: true } }
          ]
        })
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'file-loader?name=[name].[ext]&outputPath=/img/',
      }
    ]
  },
  plugins: [
    new StyleLintPlugin({
      configFile: path.resolve(__dirname, 'stylelintrc.json'),
      context: path.resolve(__dirname, 'assets/styles/main.scss')
    }),
    new ExtractTextPlugin({
      filename: "[name].css",
      disable: process.env.NODE_ENV === "development"
    }),
    new WebpackRTLPlugin({
      filename: 'main.rtl.css'
    }),
  ]
};

Wrong Way:

wrong way in wordpress

project structure

structure