Vue加载程序的laravel-mix配置

Question

我试图使用vuejs创建一个CSS模块。 但是，我不知道如何配置Webpack。

这是我的Vue组件

  <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>

这是我的laravel-mix配置：

    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'
            ]
          },
        ],
      }
    });

我没有使用webpack的经验，距我开始这样做已经快8个小时了，而我取得的唯一进步就是现在正在编译：D。

谢谢。