Is it possible to combine extract with css preprocessing?

I'm on webpack version 4 and trying to achieve 2 things: 1) separate my packages into main.js, vendor.js, and manifest.js 2) compile my sass and less files correctly into css

When I omit the stylesheets and invoke mix.extract(), it creates those 3 files correctly but POSTCSS complains of having no stylesheets to process. My site doesn't load either. However, when I leave in the calls to .less and .sass, they seem to be regarded as JS files. The webpack boilerplate is inserted there along with a comment indicating compilation was unsuccessful. So, my question is whether it's possible to retain the first 3 files and compile my sass (and split my code via dynamic imports). Below is my webpack.mix.js

var mix = require('laravel-mix'),

fs = require('fs'),

MiniCssExtractPlugin = require('mini-css-extract-plugin'),

getFiles = function (dir) {
    // get all 'files' in this directory
    // filter directories
    return fs.readdirSync(dir).filter(file => {
        return fs.statSync(`${dir}/${file}`).isFile();
    });
};

mix.sass('resources/assets/sass/app.scss', 'public/css/mobile')
    .less('resources/assets/less/desktop/custom.less', 'public/css/desktop')
    .js('resources/assets/js/mobile/main.js', 'public/js')
    //.js('resources/assets/js/app.js', 'public/js')
    /*.extract([
        "apexcharts","chartjs", "numeral", "owl.carousel", "socket.io-client", "vue-apexcharts", "vue-croppie", "vue-image-crop-upload", "vue-moment", "vue-router", "vue-router-back-mixin", "vue-social-sharing", "vuex","bootstrap"
    ])*/
    .webpackConfig({
        optimization: {
            splitChunks: {
                // chunks: 'all',
                minSize: 2000, // 2kb
                cacheGroups: {
                    default: {
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }
        },
        plugins: [
            new MiniCssExtractPlugin(),
        ],
        module: {
            rules: [
              {
                test: /\.scss$/,
                use: [
                    { loader: 'sass-loader'},
                ]
              }
            ],
            rules: [
              {
                test: /\.less$/,
                use: [
                      { loader: 'less-loader'},
                ]
              }
            ],
        }
    })
    .options({
   
        postCss: [
          require('autoprefixer'),
        ]
    })
    .disableNotifications()

if (mix.inProduction()) {
    mix.version();
}