Webpack produces either typings or a main.css file generated but not both

[tachyon-ops]

Hi!
I am trying to make webpack produce the scss typings, together with a main.css file in the output dir that holds the same classes as the generated scss module (I've inspected the main.js and there is css created there, but since I am not injecting it on an index file automatically I am clueless on how to use it).

So, using webpack --mode development produces the correct main.css file, but it breaks my JS. Using webpack --mode production produces functional JS code with proper typings next to each css file, but no main.css. So I am doing 2 passes, one in development and copying the main.css to a distribution folder, and another production pass and copying the main.js to that distribution folder as well.
This is very hacky to say the least. Also tried to check if there are ways to process each file type with multiple loaders but not chained, or if there were any pluings for pre compilation hooks to produce that main.css file, but haven't found anything that will let me develop with ease and reload upon changes on my stylings, so I am asking you guys for help with webpack 4 configurations for this loader module.

Code:

const prodSCSS = 'typings-for-css-modules-loader?modules&sass&banner=// This file is automatically generated by typings-for-css-modules.\n// Please do not change this file\n\n';
const devSCSS = ExtractTextPlugin.extract('typings-for-css-modules-loader?modules');
...
{
    test: /\.scss$/,
    include: path.join(__dirname, 'src'),
    loader: argv.mode === 'production' ? prodSCSS : devSCSS
}

Thanks in advance!