How to output multiple CSS files from single JS file in Webpack 4?

Question

In my js file 'example.js' I want to import two .scss files 'example.scss' and 'example.m.scss' for desktop and mobile version of website respectively. So I need three outputs - example.js, example.scss and example.m.scss. How I can achieve it in Webpack 4?

JS file:

// CSS
import '../../css/example.scss';
import '../../css/mobile/example.m.scss';

My current Webpack config:

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

module.exports = {
    entry: {
        home: './src/AppBundle/Resources/public/js/main_home/main_home.js',
       // ...
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/assets'),
    },

    module: {
        rules: [
            {
                test: /\.scss|.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

Answer 1

I'm not sure if it works for .scss files as well but according to this resource you could do the following with .css files (however they state that webpack is no the best tool for that):

The best way to merge CSS files into one independent CSS file is to use extract-text-webpack-plugin.

npm install --save-dev extract-text-webpack-plugin

Edit webpack.config.js to include setup the plugin.

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'bundle.min.css': [
      path.resolve(__dirname, 'src/css/main.css'),
      path.resolve(__dirname, 'src/css/local.css')
    ],
    'bundle.js': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin("bundle.min.css"),
  ]
};

The generated dist/bundle.min.css is pure css file combining src/css/main.css and src/css/local.css.

# npm run build
./node_modules/.bin/webpack
# build for production (with minified)
./node_modules/.bin/webpack -p

NOTE: If you follow the link above you can find the steps for Lass and Less files as well.