Why is the loader for styles not working in .vue components?

Question

JavaScript

I can’t understand why it gives an error and asks to connect the loader, although it is connected, what am I doing wrong, I can’t understand. Here is the error:
ERROR in ./src/components/test.vue?vue&type=style&index=0&id=e43c18bc〈=sass&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./src/components /test.vue?vue&type=style&index=0&id=e43c18bc〈=sass&scoped=true&) 14:15
Module parse failed: Unexpected token (14:15)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/ index.js
You may need an additional loader to handle the result of these loaders.
| p
| color: red
> font-weight: bold
|
@ ./src/components/test.vue?vue&type=style&index=0&id=e43c18bc〈=sass&scoped=true& 1:0-152 1:168-171 1:173-322 1:173-322
@ ./src/components/ test.vue
@ ./src/js/index.js
@ multi ./src/js/index.js ./src/scss/style.sass
Here is the webpack setup:

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const fs = require("fs");
const { VueLoaderPlugin } = require("vue-loader");


function generateHtmlPlugins(templateDir) {
    const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
    return templateFiles.map(item => {
        const parts = item.split(".");
        const name = parts[0];
        const extension = parts[1];
        return new HtmlWebpackPlugin({
            filename: `${name}.html`,
            template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
            inject: true
        });
    });
}

const htmlPlugins = generateHtmlPlugins("./src/html");

const config = {
  entry: ["./src/js/index.js", "./src/scss/style.sass"],
  output: {
    filename: "./js/index.js",
  },
  devtool: "source-map",
  mode: "production",
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        extractComments: true
      })
    ]
  },
  devServer:{
      contentBase: './dist/html',
      inline: true
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        include: path.resolve(__dirname, "src/scss"),
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {}
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              url: false
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              sourceMap: true,
              plugins: () => [
                require("cssnano")({
                  preset: [
                    "default",
                    {
                      discardComments: {
                        removeAll: true
                      }
                    }
                  ]
                })
              ]
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.html$/,
        include: path.resolve(__dirname, "src/html","index.html"),
        use: ["raw-loader"]
      },
      {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loader: {
              scss: 'vue-style-loader!css-loader!sass-loader',
            }
          }
      },
    ]
  },
  resolve:{
    alias:{
      'vue$': 'vue/dist/vue.js'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: "./css/style.bundle.css"
    }),
    new CopyWebpackPlugin([
      {
        from: "./src/fonts",
        to: "./fonts"
      },
      {
        from: "./src/favicon",
        to: "./favicon"
      },
      {
        from: "./src/img",
        to: "./img"
      },
      {
          from: "./src/php-scripts",
          to: "./php-scripts"
      }
    ])
  ].concat(htmlPlugins)
};

module.exports = (env, argv) => {
  if (argv.mode === "production") {
    config.plugins.push(new CleanWebpackPlugin());
  }
  return config;
};

Please help, I don't understand what's wrong.