webpack - 如何使用 sass-loader 和 resolve-url-loader 解析 sass 文件中的图像路径

Question

我已阅读 sass-loader 和 resolve-url-loader 描述，但我仍然不明白为什么 sass-loader 无法解析 sass 文件中的图像路径（url）。

请帮助我怎么能弄清楚！

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'
    }),
  ]
};

错误的路径：

wordpress中的错误路径

项目结构

结构体