Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) webpack5 vue2

Question

When building with Webpack 5, I encounter CSS-related errors. Below are the versions of the packages and the Webpack configuration I have set up.

 ERROR in ./src/style/index.scss (./src/style/index.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/style/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Invalid CSS after ".el-button--rgba": expected selector, was "(0,0,0,0),"
        on line 111 of node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss, in mixin `m`
        from line 213 of src/style/elements/button.scss, in mixin `@content`
        from line 74 of node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss, in mixin `b`
        from line 44 of src/style/elements/button.scss
        from line 93 of src/style/index.scss

ERROR in ./src/style/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Invalid CSS after ".el-button--rgba": expected selector, was "(0,0,0,0),"
        on line 111 of node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss, in mixin `m`
        from line 213 of src/style/elements/button.scss, in mixin `@content`
        from line 74 of node_modules/element-ui/packages/theme-chalk/src/mixins/mixins.scss, in mixin `b`
        from line 44 of src/style/elements/button.scss
        from line 93 of src/style/index.scss

package.json

"vue": "^2.7.14",
"sass-loader": "^13.3.2",
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"postcss-loader": "^2.1.6",
"vue-loader": "^15.10.1",
"webpack": "^5.89.0",

utils.js

exports.cssLoaders = function(options) {
  options = options || {};

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  };

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap,
      remove: false
    }
  };


  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    // MiniCssExtractPlugin CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return [MiniCssExtractPlugin.loader].concat(loaders); // 추출 옵션 변경
    } else {
      return ['vue-style-loader'].concat(loaders);
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  };
};

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
  const output = [];
  const loaders = exports.cssLoaders(options);

  for (const extension in loaders) {
    const loader = loaders[extension];
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    });
  }

  return output;
};

webpack.config.js

const utils = require('./utils');  


const webpackConfig = merge(baseWebpackConfig, {
      stats: {
        errorDetails: true, 
  },
  mode: 'production',
   
  performance: {
    hints: false,
  },
  optimization: {
  
    minimize: true,
 
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
        manifest: {
          name: 'manifest',
          chunks: 'all',
          minChunks: Infinity,
        },
      },
    },
  },
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
    }),
  },

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath(`js/[name].${Date.now().valueOf()}.[chunkhash].js`),
    chunkFilename: utils.assetsPath(`js/[name].${Date.now().valueOf()}.[chunkhash].js`),
  },
  plugins: [
    
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
    }),
   
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
       
      },
    }),
 
  ],
});

When I run npm run build, I get the following error, and I'm not sure if it's due to a version conflict with Sass-loader or another issue. Can you please assist me?