laravel-mix configuration for vue-loader

Question

I was trying to create a css modules using vuejs. However, I cannot figure out how to configure the webpack.

Here is my Vue component

  <template>
    <div>
      <div :class="$style.header_top">
      </div>
    </div>
  </template>
  <style module lang="scss">
    $black: #1e1e1e;
    $white: #fff;

    .header {
      position: absolute;
      width: 100%;

      &_top {
        background-color: $black;
        padding: 15px 0;
      }
     ....
   </style>

This is my laravel-mix configuration:

    mix.webpackConfig({
      module: {
        rules: [
          {
            test: /\.css$/,
            resourceQuery: '/module/',
            loaders: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  modules: true,
                  localIdentName: '[local]_[hash:base64:8]',
                },
              },
              'vue-loader'
            ]
          },
        ],
      }
    });

I don't have any experience with webpack and it is almost 8 hours now since i started doing this and the only progress that I made is that it is now compiling :D.

Thank you in advance.