What needs to be written in the webpack config so that it becomes possible to write all the styles not in one scss file, but in several?

Question

Sass

I set up webpack, if you write all the styles in one scss file and connect it, then everything is OK, but if you split it into several separate files and import them into one and connect it, then there are problems with the assembly and the styles are not connected. Can you tell me what needs to be fixed in the webpack config file?

const path = require("path");
const HTMLWepackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    port: 3000,
    hot: true,
    open: true,
    overlay: true,
    contentBase: "./dist",
  },
  plugins: [
    new HTMLWepackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: [/node_modules/],
      },
      {
        test: /\.html/,
        loader: "html-loader",
        options: {
          esModule: false,
        },
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              esModule: false,
            },
          },
        ],
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
};

error:
ERROR in ./src/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/ dist/cjs.js):
SassError: Undefined variable.
╷
14 │ background: $bgColor;
│ ^^^^^^^^
╵
src\header.scss 14:17 @import
src\index.scss 1:9 root stylesheet
at processResult (D:\TEST\DataArt\Control work\node_modules\webpack\lib\NormalModule .js:598:19)
at D:\TEST\DataArt\Control work\node_modules\webpack\lib\NormalModule.js:692:5
at D:\TEST\DataArt\Control work\node_modules\loader-runner\lib\ LoaderRunner.js:399:11
at D:\TEST\DataArt\Control work\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (D:\TEST\DataArt\Control work\node_modules\loader-runner\lib\LoaderRunner .js:124:13)
at D:\TEST\DataArt\Control work\node_modules\sass-loader\dist\index.js:54:7
at Function.call$2 (D:\TEST\DataArt\Control work\node_modules \sass\sass.dart.js:91729:16)
at _render_closure1.call$2 (D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js:80373:12)
at _RootZone.runBinary$3$3 ( D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js:27269:18)
at _FutureListener.handleError$1 (D:\TEST\DataArt\Control work\node_modules\sass\sass.dart.js: 25797:19)
@ ./src/index.js 1:0-22

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)