I would like to bundle my CSS files in a separate file (something like style.min.css). In my CSS files, I have @import url() that imports another CSS files. Currently my CSS is bundle in the main JS file. This works fine, but I'm not able to create a separate CSS file.

I read the following ressources :

• Bundling separate CSS with Webpack
• Webpack: bundle multiple vendor css in one separate file?
• /@avdhoot.980/minimize-extracted-css-file-using-webpack-cssminimizerwebpackplugin-636760d1ebfc

Mainly based on the last link, I updated my webpack.config.js. I added my main CSS file in the entries :

entry: {
   home: ['./js/home.js'],
   css: ['./css/style.css']
},

and added this plugin :

  plugins: [

      //...

      // Minify CSS
      new MiniCssExtractPlugin(),
    ]

Here is my rule for css files :

rules: [
        // CSS loader
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },

Unfortunately, no CSS file is generated. I can't figure out why it is not working.