Why doesn't Scss work in Webpack?

Question

Sass

I wanted to build the project in Webpack 4. I included sass in webpack.config.js:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    home: "./src/assets/js/pages/home/home.js",
    projects: "./src/assets/js/pages/projects/projects.js"
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].js",
    library: "[name]",
    publicPath: "/dist"
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: "babel-loader",
      exclude: "/node_modules/"
    }, {
      test: /\.scss$/,
      use: [
        "style-loader",
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: { sourceMap: true }
        }, {
          loader: "sass-loader",
          options: { sourceMap: true }
        }
      ]
    }]
  },
  devServer: {  // configuration for webpack-dev-server
    port: 7700, // port to run dev-server
  }
}

Then I wrote npm run build and got the following error:

Error: No module factory available for dependency type: CssDependency
     at addDependency (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compilation.js:8
00:12)
    at iterationOfArrayCallback (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compi
lation.js:208:3)
    at addDependenciesBlock (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compilati
on.js:816:5)

    at Compilation.processModuleDependencies (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webp
ack\lib\Compilation.js:827:4)
    at afterBuild (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compilation.js:954:
15)
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compilation.js:998:11
    at callback (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compilation.js:734:5)
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compilation.js:782:12
    at handleParseResult (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\NormalModule
.js:478:12)
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\NormalModule.js:500:6
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\loader-runner\lib\Loa
derRunner.js:214:10)
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\loader-runner\lib\LoaderRunner.js:186:6
    at context.callback (C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\loader-runner\lib\LoaderR
unner.js:111:13)
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\mini-css-extract-plugin\dist\loader.js:199:
12
    at C:\Users\Кирилл\Desktop\Проекты и ЯП\Верстки\Leopardo - Мой сайт\node_modules\webpack\lib\Compiler.js:343:11

etc.
------------------
I searched the Internet nothing helped or did not work.
Here is package.json:

{
  "name": "name",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "server": "webpack-dev-server --open",
    "build": "webpack",
    "dev": "webpack --development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "split-html-to-chars": "^1.0.5",
    "style-loader": "^1.1.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

What to do?

Answer 1

"style-loader",
MiniCssExtractPlugin.loader

these 2 loaders don't work together or one or the other
is ideal if you use style-loader in development for fast HMR work and MiniCssExtractPlugin.loader in production