Error when compiling Sass: ModuleBuildError at $spacers Bootstrap

I don't know where it went wrong. When I tried to compile a Sass module from Bootstrap an error occurred.

This is a screenshot when the error occurs:

I just duplicated the Sass file from Bootstrap scss/_variables.scss to custom/_custom-variables.scss and only changed some of the variables.

This is a screenshot of the import of custom/_custom-variables.scss

And here is the webpack.config.js configuration file:

const path                    = require('path');
const webpack                 = require('webpack');

const HTMLWebpackPlugin       = require('html-webpack-plugin');
const MiniCssExtractPlugin    = require('mini-css-extract-plugin');
const CopyPlugin              = require("copy-webpack-plugin");
const { CleanWebpackPlugin }  = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src/app.js'),
  },
  output: {
    filename: process.env.NODE_ENV == 'production'
    ? 'js/[name].[contenthash:8].js'
    : 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    pathinfo: false,
  },
  devtool: process.env.NODE_ENV == 'production' ? false : 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        include: path.resolve(__dirname, 'src'),
        exclude: /\/node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: { importLoaders: 2 }
          },
          'postcss-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: process.env.NODE_ENV == 'production'
          ? 'images/[name].[contenthash:8][ext]'
          : 'images/[name][ext]',
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: process.env.NODE_ENV == 'production'
          ? 'fonts/[name].[contenthash:8][ext]'
          : 'fonts/[name][ext]',
        }
      },
    ]
  },
  resolve: {
    modules: [
      path.join(__dirname, 'src'),
      'node_modules'
    ],
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: process.env.NODE_ENV == 'production'
      ? 'css/[name].[contenthash:8].css'
      : 'css/[name].css',
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src', 'manifest.webmanifest'),
        },
        {
          from: path.resolve(__dirname, 'src', 'images'),
          to: path.resolve(__dirname, 'dist', 'images'),
          toType: 'dir',
          noErrorOnMissing: true,
          globOptions: {
            ignore: ['*.DS_Store', 'Thumbs.db'],
          }
        },
      ],
    }),
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, 'src', 'index.html'),
      inject: 'body',
      hash: false,
      minify: false,
    }),
  ],
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          chunks: 'all',
          enforce: true,
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          enforce: true,
        }
      }
    }
  },
};

Maybe some of you can help with this problem.

Thank you.