Webpackを使ったVue.jsの環境で、styleが反映されない。

Question

前提・実現したいこと

webpackを使用して、Vueの環境を作っているのですが、.vueファイル内のstyleタグが反映されません。
.vueファイル内のscriptタグで定義した"hello vue"という文字は表示されるので、webpack.config.jsでのstyle関連のloaderの指定が間違っているのではないかと思っているのですが、webpackでのビルドはエラーなく成功しているので、どう対処すればよいか困っています。コードの間違いや、足りない記述などご教示下さると助かります。

該当のソースコード

webpack.config.js

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "dist"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
          }
        }
      },
      {
        test: /.js$/,
        loader: "babel-loader",
      },
      {
        test: /.scss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          "sass-loader",
        ],
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    extensions: [".vue", ".js"],
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  }
}

index.js

import Vue from "vue";
import App from "./App.vue"

new Vue({
  el: "#app",
  render: h => h(App)
})

App.vue

<template>
  <div>
    <h1 class="title">{{message}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, vue"
    }
  }
}
</script>

<style lang="scss" scoped>
  .title{
    color: red;
  }
</style>

質問に不備があれば、訂正させていただきます。
ご回答のほど宜しくお願いいたします。

Answer 1

webpack.config.jsでのloaderの設定をvue-style-loaderからstyle-loaderに変更したら、きちんとスタイルが反映されました。参考にした、Qiitaの記事では、vue-style-loaderで動いていたようなので、根本的に何がいけなかったのかはまだ分かっていません。分かれば、追記しようと思います。