Good morning. This is the code in my webpack.mix.js:

let mix = require("laravel-mix");
require("laravel-mix-compress");

mix.setPublicPath("assets");

mix
  .sass("assets-src/fq-magazine/css/main.scss", "fq-magazine/css/main-desktop.css")
  .sass("assets-src/fq-magazine/css/single.scss", "fq-magazine/css/single-desktop.css")
  .sass("assets-src/fq-magazine/css/page.scss", "fq-magazine/css/page-desktop.css")
  .version();

mix.compress({
  productionOnly: true,
});

So far from each .scss I generate a .css with all the media query rules that I will use for desktop (from 768px up).
My .scss is mobile first, so I have no rules like (max-width: 767px). I only use media queries from tablets and up, in cases like (min-width: 768px) or (min-width: 1024px) and so on.
What I would like to have is my 3 .css files for mobile with all the css without the media queries >= 768px.
I have tried various packages but I can only generate a file that contains the media queries (and in my case they are the ones for desktop), not without them.

So I would like to have a main-mobile.css with all the classes without media queries basicly.
And a main-desktop.css with all the classes plus all the media queries.
Thank you!