я навичок. Импорты (URL) для jsx работают. НО url не работает для сss/scss для background-image. Картинки в паблике папке

module.exports = {
  mode: "development",
  entry: "./Public/index.js",

  output:{
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].js",
  },

  plugins:[
    new HtmlWebpackPlugin({ template: "./Public/index.html" }),
    new CleanWebpackPlugin(),  
    new MiniCssExtractPlugin({
      filename: "[name].css",    
    })
  ],

  module:{
    rules: [
       ///styles
      { 
        test: /\.(css|scss)$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader","sass-loader"],
     
      },
     
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
          outputPath: './public/Images',
        },
      },

------scss-----

.bgPictureBox{
    width: 100%;
    height: 1020px;
    background-size: cover;
    background-image: url('/public/Images/bro-and-gun.jpg');
}