How can i set up less / less-loader in nextjs 13? I am getting error while setup

Question

error - ./src/components/common/base/loader.less Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > @import '../../../../style/vars.less'; | | Import trace for requested module: ./src/components/common/base/loader.less ./src/components/common/base/loader.tsx ./src/layouts/primary-layout.tsx ./src/layouts/base-layout.tsx I want to configure less with nextjs 13 it was an old project which i am upgrading this app because i have performance issues but after update i stumbled upon this error. this is my next.config.js file

const fs = require('fs');
const path = require('path');
const withLess = require('next-with-less');
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
// const withSass = require('@zeit/next-sass');

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './style/default.less'), 'utf8')
);

const nextConfig = {
  distDir: '.next',
  poweredByHeader: false
  // target: "serverless"
};

const plugins = [
  withLess({
    // cssModules: true,
    lessLoaderOptions: {
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: themeVariables, // make your antd custom effective
        localIdentName: '[path]___[local]___[hash:base64:5]',
      },
    },
    webpack: (config, { isServer }) => {
      // it is a trick, since we have issue if import less file
      // add tsconfig paths here to avoid that
      // eslint-disable-next-line no-param-reassign
      config.resolve.plugins = [new TsconfigPathsPlugin()];

      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        // eslint-disable-next-line no-param-reassign
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals)
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader'
        });
      }
      return config;
    }
  }),
  withCSS,

  (nextConfig = {}) => {
    return Object.assign({}, nextConfig, {
      webpack(config, options) {
        config.resolve.plugins = [new TsconfigPathsPlugin()];
        if (config.resolve.plugins) {
          config.resolve.plugins = [new TsconfigPathsPlugin()];
        } else {
          config.resolve.plugins = [new TsconfigPathsPlugin()];
        }
        return config;
      }
    });
  }
];

module.exports = {
  async redirects() {
    return [
      {
        source: 'https://www.******.com',
        destination: 'https://******.com',
        permanent: true
      }
    ];
  }
};

module.exports = withPlugins(plugins, nextConfig);