Why is Webpack file-loader not triggering for CSS urls?

Question

I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be totally untouched, and no image files are emitted.

See below for example sass, and the current webpack config. I can verify that the file extension regex is correct, and changing the order of loaders doesn't seem to have any effect. Are there other steps needed to make sure the file-loader sees the urls in CSS?

  #hero {
    background-image: url('/assets/welcome/responsive/header-image.jpg');
    background-size: cover;
    background-position: 0% 70%;
    min-height: 435px;
    background-color: #000;
    color: $white;
    font-weight: 200;
    position: relative;
}

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    'public/compiled/app': './app/assets/javascripts/compile/application.js',
    'public/compiled/seo_srp_map_sections':
      './app/assets/javascripts/compile/seo_srp_map_sections.js',
    'app/assets/javascripts/server_rendering':
      './app/assets/javascripts/server_rendering_to_compile.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '.')
  },
  resolve: {
    alias: {
      templates: path.resolve(__dirname, 'app/assets/javascripts/templates'),
      stylesheets: path.resolve(__dirname, 'app/assets/stylesheets'),
      vendor_stylesheets: path.resolve(__dirname, 'vendor/assets/stylesheets')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader'
      },
      {
        test: /\.m?jsx?$/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'file-loader'
      }
    ]
  }
};

Answer 1

You can add MiniCssExtractPlugin like this:

 plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: "style.chunk.css",
      hot: true,
      orderWarning: true,
      reloadAll: true,
      cssModules: true
    })
]

And for images type, you can try with url-loader

  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 5000
        }
      }
    ]
  }

For svg, font format you can use loader is file-loader.