How to add less loader

[farhanmalhi-dbank]

(clearly describe the functionality you think CRACO should have) this is the config

const { theme } = require('antd/lib');
const { convertLegacyToken } = require('@ant-design/compatible/lib');

const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      const lessRegex = /\.less$/;
      const lessModuleRegex = /\.module\.less$/;

      const getStyleLoaders = (cssOptions, preProcessor) => {
        const loaders = [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: cssOptions
          }
        ];

        if (preProcessor) {
          loaders.push(preProcessor);
        }
        return loaders;
      };

      webpackConfig.module.rules.push(
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        },
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader'
            },
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true
              }
            }
          ]
        },
        {
          test: lessRegex,
          exclude: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2
            },
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  modifyVars: v4Token,
                  javascriptEnabled: true
                }
              }
            }
          )
        },
        {
          test: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2,
              modules: {
                localIdentName: '[local]_[hash:base64:5]'
              }
            },
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  modifyVars: v4Token,
                  javascriptEnabled: true
                }
              }
            }
          )
        }
      );

      return webpackConfig;
    }
  }
};

it is not picking my styles in .less files.

FYI Reason for not using craco-less is latest version of craco-less supports craco 6 version which has webpack 4 i want to use webpack 5.

[dilanx]

Have you checked out the less-loader documentation? Ideally, following those instructions then adding the relevant webpack config contents to the craco config should work.