why the webpack 5.x did not generate entry scss file to css file

Question

I have a scss file defined as webpack 5.x entry like this:

'bs-lite' : './src/public/bootstrap-lite.scss'

and the css generate config like this:

new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),

but the webpack did not generate the bs-lite.css file in the distination folder. what should I do to make it generate the entry css file? This is the full webpack config:

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

module.exports = {
  entry : {
    bg : './src/background-scripts/' ,
    content : ['./src/content-scripts/firefox-fix.js', './src/content-scripts/'] ,
    options : [
      './src/options/'
    ],
    popup : './src/popup/' ,
    'bs-lite' : './src/public/bootstrap-lite.scss'
  } ,
  resolve: {
    alias: {
        // https://stackoverflow.com/questions/50805384/module-not-found-error-cant-resolve-vue-path-not-correct
        vue: 'vue/dist/vue.esm-bundler.js'
    },
  },
  output : {
    path : path.resolve(__dirname, '../src/bundle') ,
    filename : '[name].js'
  },
  module : {
    rules : [
      {
        test : /\.js$/ ,
        exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
        loader : 'babel-loader'
      } ,
      {
        test : /\.woff$/ ,
        loader : 'file-loader' ,
        options : {
          name : '[name].[ext]'
        }
      } ,
      {
        test : /\.html$/ ,
        loader : 'vue-html-loader'
      } , 
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test : /\.(scss)$/ ,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'commons1',
          test: /\.(scss)$/,
          chunks: 'all',
          enforce: true
        },
        commons1: {
          name: 'commons1',
          chunks: 'all',
          minChunks: 1,
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(popup|content)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },
        commons2: {
          name: 'commons2',
          chunks: 'all',
          minChunks: 1,
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(options|commons1)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },
        commons3: {
          name: 'commons3',
          chunks: 'all',
          minChunks: 1,
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(bg|commons2)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },
      }
    }
  },
  plugins : [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
    new HtmlWebpackPlugin({
      filename: 'popup.html',
      template: 'src/popup/index.html'
    }),
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false,
    }),
  ]
};

I need the webpack 5.x to generate a css file named bs-lite.css in the distination folder. Tried 1: I tried add config like this:

    bsLiteStyles :{
              name: 'bs-lite',
              test: (m, c, entry = 'bs-lite') =>
                m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
              chunks: 'all',
              enforce: true
            },


function recursiveIssuer(m) {
  if (m.issuer) {
      return recursiveIssuer(m.issuer)
  } else if (m.name) {
      return m.name
  } else {
      return false
  }
}

still did not generate the bs-lite.css file.

Tried 2:

bsLiteStyles :{
          name: 'bs-lite',
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(bs-lite)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          },
          chunks: 'all',
          enforce: true
        },
        styles: {
          name: 'commons1',
          test: /\.(scss)$/,
          chunks: 'all',
        },

still did not generate the bs-lite.css file.

Tried 3:

bsLiteStyles :{
          name: 'bs-lite',
          test: /bootstrap-lite\.(scss)$/,
          chunks: 'all',
          enforce: true
        },
        styles: {
          name: 'commons1',
          test: /\.(scss)$/,
          chunks: 'all',
          enforce: true
        },

still did not work.