如何使用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'
    }),
  ]
};

错误的道路：

wrong path in wordpress

项目结构

structure