.vueの中でscss記述をする設定メモ

.vueファイル内styleタグでscss記述をしたかったが、ハマったのでメモ。
(ちなみにscssファイル自体からのコンパイルはgulp-sassをgulpfile.jsから設定し使用している。)

大体のサイトでは vue-cliを導入し lang="scss"つけたらすぐ使えると書いてあるが、vue-cliを入れてない場合はwebpack.configに自分でloaderを追加していなないと駄目みたいで、

webpack.config.js

test: /\.vue$/,
        loader:"vue-loader",
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader'
          }
        }

これに加え、

webpack.config.js

test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
        ]

scss側にもvue-style-loaderを適用すると解決できた。
不要な記述などまだあるし全て把握してないけど、とりあえずは動作まで。