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

Question

I have read sass-loader and resolve-url-loader description but still i can't understand why sass-loader can't resolve image path (url) in sass file.

please help me how can figure out!

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 path:

wrong path in wordpress

structure of project

structure