webpack4.41.5でscssがバンドルできない

webpack+scss環境を作ろうとしています。
scssをwebpackでコンパイル→bundle.jsに含めたいです。
jsのみのバンドルはできたのですが、scssも含めたバンドルがうまくいきません。
エラーメッセージ見る限りoptionsあたりの書き方に問題がありそうなのですが、正しい書き方がまったくわからず、教えていただきたいです。

ディレクトリ構成は以下のようになっています

以下のようなエラーメッセージが出ます。

error
1Hash: ea4f2c5f734eebdbae39
2Version: webpack 4.41.5
3Time: 7ms
4Built at: 2020/02/07 19:53:46
5    Asset    Size  Chunks             Chunk Names
6bundle.js  15 KiB    main  [emitted]  main
7Entrypoint main = bundle.js
8[./js/index.js] 222 bytes {main} [built]
9[./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js?!./scss/test.scss] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./scss/test.scss 607 bytes {main} [built] [failed] [1 error]
10    + 3 hidden modules
11
12ERROR in ./scss/test.scss (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./scss/test.scss)
13Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
14ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
15 - options has an unknown property 'options'. These properties are valid:
16   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
17    at validate (/private/var/www/webpack_test/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11)
18    at Object.loader (/private/var/www/webpack_test/node_modules/sass-loader/dist/index.js:36:28)
19 @ ./scss/test.scss 2:26-149
20 @ ./js/index.js

以下は各ファイルの中身です

json
1//package.json
2{
3  "scripts": {
4    "build": "webpack --watch"
5  },
6  "dependencies": {
7    "css-loader": "^3.4.2",
8    "node-sass": "^4.13.1",
9    "sass-loader": "^8.0.2",
10    "style-loader": "^1.1.3",
11    "webpack": "^4.41.5",
12    "webpack-cli": "^3.3.10"
13  }
14}

webpack
1//webpack.config.js
2module.exports = {
3    // メインとなるJavaScriptファイル（エントリーポイント）
4    entry: "./js/index.js",
5    mode: "development",
6    // ファイルの出力設定
7    output: {
8        //  出力ファイルのディレクトリ名
9        path: `${__dirname}/dist`,
10        // 出力ファイル名
11        filename: "bundle.js"
12    },
13    module: {
14        rules: [
15            {
16                test: /.scss/,
17                use: [
18                    // linkタグに出力する機能
19                    "style-loader",
20                    // CSSをバンドルするための機能
21                    {
22                        loader: "css-loader",
23                        options: {
24                            // オプションでCSS内のurl()メソッドの取り込みを禁止する
25                            url: false,
26                            // ソースマップの利用有無
27                            sourceMap: enabledSourceMap,
28
29                            // 0 => no loaders (default);
30                            // 1 => postcss-loader;
31                            // 2 => postcss-loader, sass-loader
32                            importLoaders: 2
33                        }
34                    },
35                    {
36                        loader: "sass-loader",
37                        options: {
38                            // ソースマップの利用有無
39                            sourceMap: enabledSourceMap
40                        }
41                    }
42                ]
43            }
44        ]
45    },
46};

javascript
1//index.js
2import '../scss/test.scss';
3import * as util from './utility.js'
4///////////////////////////////////////////////////////////////////////
5
6document.getElementById("js_open").addEventListener("click", util.modalOpen, false);

javascript
1//utility.js
2export function modalOpen() {
3    console.log("hello");
4}

scss
1//test.scss
2h1 {
3    color: aqua;
4}

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset='UTF-8'>
5        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6        <meta http-equiv="X-UA-Compatible" content="IE=edge">
7        <meta name="format-detection" content="telephone=no">
8    </head>
9    <body>
10        <h1>ようこそwebpackの世界へ</h1>
11        <p>javascript・scss</p>
12        <button id="js_open"></button>
13
14        <script src='../dist/bundle.js'></script>
15    </body>
16
17</html>

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

回答1件

自己解決

以下の参考サイトの通りwebpack.config.jsを修正したところscss含めたbundleに成功しました。
https://note.com/youheyhey0505/n/n64771d0989a3

webpack
1//修正後のwebpack.config.js
2    module: {
3        rules: [
4            {
5                test: /.css/,
6                use: [
7                    // linkタグに出力する機能
8                    "style-loader",
9                    "css-loader",
10                ]
11            },
12            {
13                test: /.scss/,
14                use: [
15                    // linkタグに出力する機能
16                    "style-loader",
17                    "css-loader",
18                    "sass-loader",
19                ]
20            }
21        ]
22    },