webpackでvueコンポーネントのsassをバンドルする方法

前提・実現したいこと

webpack4というツールでバンドルする環境を作っています。

バンドル対象は、

ライブラリ（vue）
自作のjavascript
自作のvueコンポーネント（単一コンポーネント）
自作のcss(sassで書いてます）

の４つです。

バンドルは無事にできたのですが、バンドルしたらcssがjsファイルの中に入ってしまうというのが、
どうしても脳みその中で処理しきれないので、
「MiniCssExtractPlugin」というプラグインを使って、cssだけ別ファイルにしたいと思っています。

以下のようなwebpack.config.jsを書いたら、無事に.cssファイルになったのですが、
vueの単一コンポーネントファイルの中に書いているcss(sass)だけ、
他のcssと一緒にバンドルされず、別のファイルになってしまいます。

cssファイルとvueのcssファイルと２個なので両方読み込めば問題ないのはわかるのですが、
なんだかスッキリしません。
.vueの中のcssも他のcssと同じファイル、もしくはこれだけjsの中に入れるというのはできないでしょうか。

発生している問題・エラーメッセージ

該当のソースコード

webpack.config.js
※（追記）ミスがあったので差し替えました※

javascript
1const path = require('path');
2const { VueLoaderPlugin } = require("vue-loader");
3const MiniCssExtractPlugin  = require("mini-css-extract-plugin");
4const setPath = function(folderName) {
5  return path.join(__dirname, folderName);
6}
7module.exports = {
8  // development|production|none
9  mode: 'development',
10  entry: {
11    // javascript
12    "js/app" : "./resources/src/js/app.js",
13    // css
14    "main"   : "./resources/src/css/main.scss",
15  },
16  output: {
17    path: setPath('/resources'),
18    filename: "[name].js"
19  },
20  optimization: {
21    splitChunks: {
22      name: 'js/vendor',
23      chunks: 'initial',
24    }
25  },
26  module:{
27    rules:[
28      {
29        test: /.vue?$/,
30        loader: 'vue-loader',
31      },
32      {
33        test: /.scss$/,
34        use: [
35            MiniCssExtractPlugin.loader,
36            {
37              loader: 'css-loader',
38              options: {
39                url: false, 
40                minimize: true, 
41                sourceMap: true
42              }
43            },
44            {
45              loader: 'sass-loader',
46              options: {
47                sourceMap: true
48              }
49            }
50        ]
51      }
52    ]
53  },
54  plugins: [
55    new VueLoaderPlugin(),
56    new MiniCssExtractPlugin({
57        // prefix は output.path
58        filename: 'css/[name].css'
59    })
60  ]
61}

test.vue
※vue公式の単一コンポーネントのテンプレートからテスト用にコピーしてちょっと変えたものです。

javascript
1<template>
2  <div id="app">
3    <h1>{{ msg }}</h1>
4    <h2>Essential Links</h2>
5    <ul>
6      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
7      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
8      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
9      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10    </ul>
11    <h2>Ecosystem</h2>
12    <ul>
13      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
14      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
15      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
16      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
17    </ul>
18  </div>
19</template>
20
21<script>
22export default {
23  name: 'app',
24  data () {
25    return {
26      msg:'Welcome to Your Vue.js App'
27    }
28  }
29}
30</script>
31// ☆ここから↓だけ別のcssファイルになってしまいます。
32<style lang="scss" scoped>
33 #app {
34   font-family: 'Avenir', Helvetica, Arial, sans-serif;
35   -webkit-font-smoothing: antialiased;
36   -moz-osx-font-smoothing: grayscale;
37   text-align: center;
38   color: #2c3e50;
39   margin-top: 60px;
40 }
41 h1, h2 {
42   font-weight: normal;
43 }
44 ul {
45   list-style-type: none;
46   padding: 0;
47 }
48 li {
49   display: inline-block;
50   margin: 0 10px;
51 }
52 a {
53   color: #42b983;
54 }
55</style>

試したこと

最初はwebpack.config.jsでexportsを１つにして、entryにjavascriptもcssも一緒に書いていました。
exportsは配列で渡せるとあったのでjsとsassの設定を分けて書いて、sass側だけプラグインの設定を書いてみた（掲載ソース）のですが、同じ結果になってしまいました。

（追記）
上記の方法ではバンドル時にエラーになっていました。
watchという、ファイルを変更したらすぐバンドルしてくれる機能を使っていましたが、
監視中にwebpack.config.jsを変えたせいか、全く反映されていませんでした。
掲載ソースは当初のものに差し替えました。

環境

windows 10
Webpack 4.16.5
webpack-cli　3.1.0
css-loader　1.0.0
mini-css-extract-plugin　0.4.1
sass-loader　7.1.0
vue-loader　15.3.0
vue-template-compiler　2.5.17

行動規範の内容に同意します

回答1件

自己解決

無事に目的を果たせましたのでクローズします。

（追記）
落ち着いて考えたら変な回答を書いてしまったので訂正します。

そもそも、参考にしたサイトがエントリーポイントにsassファイルを書いていたので、
「javascriptとsassファイルは別のエントリーポイントを用意するものなんだ」
と勘違いしてしまっていましたが、
エントリーポイントをjavascript側だけにして、その中でsassをインポートすれば解決でした。

私がcssとjsを分けたかっただけで、本来全部1ファイルにバンドルしてくれるツールなんだから
エントリーポイントが1個でいいのは当たり前ですね。。。

以下、当初の回答
結果的にはどんなに無い知恵絞っても、Vueコンポーネント内のcssの記載を
他のsassファイルと一緒に１ファイルにバンドルすることができませんでした。
方向としてはVueコンポーネント内のcssの記載だけ、jsファイルに入れるようにしました。
方法はmodule.exportsの設定を複数（js用とsass用）に分けて書くことで解決できました。

私が間違ってたのは、
Vueコンポーネント内のsassも、書かれいているファイルは「～.vue」なので、

javascript
1    module:{
2      rules:[
3        {
4          test: /.vue?$/,
5          loader: 'vue-loader',
6          options: {
7          　// ここら辺に何とかしてコンポーネント内のsassのバンドル設定を書く
8          }
9        },