Tengo una plantilla modularizada que usa Sass-loader para compilar archivos scss que tiene cada componente, pero no he podido configurar webpack en laravel mix para que este funcione correctamente.

Estoy usando la versión(5.8) de laravel y Vue JS (2.5.17)

ejemplo de componente:

    <template>
      <div :class="$style.logo">
        <div :class="$style.logoContainer">
          <img
            v-if="!settings.isMenuCollapsed || withDrawer"
            src="resources/images/logo-inverse.png"
            alt
          >
          <img
            v-if="settings.isMenuCollapsed && !withDrawer"
            src="resources/images/logo-inverse-mobile.png"
            alt
          >
        </div>
      </div>
    </template>
    
    <style lang="scss" module>
      @import "./style.module.scss";
    </style>

Aquí hay un componente con su archivo style.scss que se compilará como módulo. Las clases aquí deben guardarse en $style.

Yo uso estos paquetes en package.json:

    "sass": "^1.15.2",
    "sass-loader": "^7.1.0"

y finalmente, mi archivo webpack.mix.js:

    const mix = require('laravel-mix');
    require('laravel-mix-alias');
    
    mix.webpackConfig({
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              {
                loader: "sass-loader",
                options: {
                    modules: true
                }
              }
            ]
          }
        ]
      }
    });
    
    mix.alias({
      '@': '/resources/js'
    })
    
    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css');

La cuestión es que las clases en los archivos de componentes scss no se compilan, y por eso, las etiquetas html después de la compilación no poseen estilos, perdiendo toda la estructura de mi plantilla.

Este tiene que ser el componente del archivo compilado:

    <div class="index_logo_hObJ1">
      <div class="index_logoContainer_1zCMH">
        <img src="resources/images/logo-inverse.png" alt="">
      </div>
    </div>

y esto es lo que obtengo:

    <div>
      <div>
        <img src="resources/images/logo-inverse.png" alt="">
      </div>
    </div>

Como puede ver, no se inyectaron clases en divs, y no obtengo errores al compilar, ¿qué estoy haciendo mal?