Webpack環境下でcss,scssが読み込まれない

##Webpack環境下でcss,scssが読み込まれず困っています。
どなたかご享受お願いいたします。

css-loader,sass-loader,node-sassを入れているのにno loadersとエラーが出ます。
詳細は以下の通りとなっております。

ERROR in ./src/stylesheets/style.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

.pug {

| color: blue;
| }
@ ./src/javascripts/main.js 1:0-35

javascript
1// package.json
2
3{
4  "name": "me",
5  "version": "1.0.0",
6  "description": "",
7  "main": "index.js",
8  "scripts": {
9    "start": "webpack-dev-server",
10    "build": "webpack --mode production",
11    "build:dev": "webpack --mode development"
12  },
13  "repository": {
14    "type": "git",
15    "url": "git+https://github.com/ChickBeans/AboutME.git"
16  },
17  "author": "R",
18  "license": "ISC",
19  "bugs": {
20    "url": "https://github.com/---/AboutME/issues"
21  },
22  "homepage": "https://github.com/---/AboutME#readme",
23  "devDependencies": {
24    "@babel/core": "^7.9.6",
25    "@babel/preset-env": "^7.9.6",
26    "babel-loader": "^8.1.0",
27    "clean-webpack-plugin": "^3.0.0",
28    "css-loader": "^3.4.2",
29    "esm": "^3.2.25",
30    "file-loader": "^6.0.0",
31    "html-loader": "^1.1.0",
32    "html-webpack-plugin": "^4.3.0",
33    "mini-css-extract-plugin": "^0.9.0",
34    "node-sass": "^4.13.1",
35    "pug-html-loader": "^1.1.5",
36    "sass-loader": "^8.0.2",
37    "style-loader": "^1.2.1",
38    "url-loader": "^4.0.0",
39    "webpack": "^4.43.0",
40    "webpack-cli": "^3.3.11",
41    "webpack-dev-server": "^3.11.0"
42  }
43}

javascript
1// webpack.config.js
2
3
4// pathの設定
5const path = require('path');
6// main.cssをoutputに書き出すプラグイン
7const MiniCssExtractPlugin = require('mini-css-extract-plugin');
8// index.htmlをoutputに書き出すプラグイン
9const HtmlWebpackPlugin = require('html-webpack-plugin');
10//  ビルドの際outputディレクトリのファイル・フォルダを削除するプラグイン
11const { CleanWebpackPlugin } = require('clean-webpack-plugin');
12
13module.exports = {
14  // エントリーの設定
15  entry: './src/javascripts/main.js',
16  // アウトプットの設定
17  devtool: 'source-map',
18  output: {
19    path: path.resolve(__dirname, './dist'),
20    filename: 'javascrpts/[name]-[hash].js'
21  },
22  module: {
23    rules: [
24      {
25        test: /.(css|sass|scss)/,
26        use: [
27          // ローダーは下から上に適用されていく
28          {
29            loader: MiniCssExtractPlugin.loader,
30          },
31          {
32            loader: 'css-loader',
33            options: {
34              // devtoolでsassファイルを表示できる 重い
35              sourceMap: true,
36            },
37          },
38          {
39            loader: 'sass-loader',
40          },
41        ],
42        test: /.(png|jpg|jpeg)/,
43        use: [
44          {
45            loader: 'file-loader',
46            options: {
47              esModule: false,
48              name: 'images/[name]-[hash].[ext]',
49              publicPath: '/',
50            },
51          },
52          {
53            loader: 'image-webpack-loader',
54            options: {
55              mozjpeg: {
56                progressive: true,
57                quality: 65,
58              },
59            },
60          },
61        ],
62        test: /.pug/,
63        use: [
64          {
65            loader: 'html-loader',
66          },
67          {
68            loader: 'pug-html-loader',
69            options: {
70              pretty: true,
71            },
72          },
73        ],
74      },
75    ],
76  },
77  plugins: [
78    // html,cssのファイルの数だけnewで作り、template,filenameを設定する
79    // cssファイルをoutput先へ別ファイルとして書き出す
80    new MiniCssExtractPlugin({
81      filename: './stylesheets/[name]-[hash].css',
82    }),
83    new HtmlWebpackPlugin({
84      // templateで指定したファイルを元にhtmlwebpackpluginがoutputにHTMLフォルダを生成する。
85      template: './src/templates/index.pug',
86    }),
87    new CleanWebpackPlugin(),
88  ],
89}

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

回答1件

自己解決

解決できました。
ネストを間違えていたようです、お恥ずかしい。

javascript
1// pathの設定
2const path = require('path');
3// main.cssをoutputに書き出すプラグイン
4const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5// index.htmlをoutputに書き出すプラグイン
6const HtmlWebpackPlugin = require('html-webpack-plugin');
7//  ビルドの際outputディレクトリのファイル・フォルダを削除するプラグイン
8const { CleanWebpackPlugin } = require('clean-webpack-plugin');
9
10module.exports = {
11  // エントリーの設定
12  entry: './src/javascripts/main.js',
13  // アウトプットの設定
14  output: {
15    path: path.resolve(__dirname, './dist'),
16    filename: 'javascrpts/main.js'
17  },
18  module: {
19    rules: [
20      {
21        test: /.(css|scss|sass)/,
22        use: [
23          {
24            loader: MiniCssExtractPlugin.loader,
25          },
26          {
27            loader: 'css-loader',
28          },
29          {
30            loader: 'sass-loader',
31          },
32        ],
33      },
34      {
35        test: /.pug/,
36        use: [
37          {
38            loader: 'html-loader',
39          },
40          {
41            loader: 'pug-html-loader',
42            options: {
43              pretty: true,
44            },
45          },
46        ],
47      },
48    ],
49  },
50  plugins: [
51    // html,cssのファイルの数だけnewで作り、template,filenameを設定する
52    // cssファイルをoutput先へ別ファイルとして書き出す
53    new MiniCssExtractPlugin({
54      filename: './stylesheets/[name].css',
55    }),
56    new HtmlWebpackPlugin({
57      // templateで指定したファイルを元にhtmlwebpackpluginがoutputにHTMLフォルダを生成する。
58      template: './src/templates/index.pug',
59      filename: 'index.html',
60    }),
61    new CleanWebpackPlugin(),
62  ],
63}