module.less not work

[zdd]

I want to use module.less in my app, but it doesn't work, the style was not applied. please help, this is my craco.config.js file:
craco-less version: 1.17.1

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#004DE5' },
            javascriptEnabled: true,
          },
        },
        modifyLessRule: function(lessRule, _context) {
          lessRule.test = /\.(module)\.(less)$/;
          lessRule.exclude = /node_modules/;

          return lessRule;
        },
        cssLoaderOptions: {
          modules: { localIdentName: "[local]_[hash:base64:5]" }
        }
      }
    },
  ],
};

and this is my tsx and style file, they were in the same dir.
AppHeader.tsx
import './AppHeader.module.less'; // import style file

AppHeader.module.less

.site_layout_header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 8px;
  justify-content: space-between;
  background-color: @primary-color;
}

.site_logo {
  height: 58px;
  margin-left: 0;
  cursor: pointer;
  object-fit: contain;
}

.site_info {
  display: flex;
  align-items: center;
}

.site_user {
  margin-left: 8px;
  color: white;
}

.logout_button {
  margin-left: 8px;
  color: #FFF;
  padding: 0 20px;
  border: 1px solid #16D0FF;
  border-radius: 15px;
  font-size: 12px;
}

[ZhelinCheng]

me too

[gaofans]

me too

[LevapVeeskela]

const CracoLessPlugin = require('craco-less')
const CracoAlias = require('craco-alias')

const lessModifyVars = {}
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: lessModifyVars,
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: lessModifyVars,
            javascriptEnabled: true,
          },
        },
        modifyLessRule: function (lessRule, context) {
          lessRule.test = /\.module\.(less)$/
          lessRule.exclude = undefined
          return lessRule
        },
        cssLoaderOptions: {
          modules: {
            localIdentName: '[local]_[hash:base64:5]',
          },
        },
      },
    },
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: './tsconfig.path.json',
      },
    },
  ],
}

ok, that work for me, but module less don't save selectors hierarchy inside, how can that I correct? for example btn selector doesn't will be to use(

.navpanel__socials {
  .btn {
    position: relative;
  }
}

https://stackoverflow.com/questions/66872491/reactjscratscarcoless-dont-correct-work-module-system-css/66877609#66877609

[magickeyyy]

const CracoLessPlugin = require('craco-less');
const path = require('path');

const lessModifyVars = {};

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: lessModifyVars,
                        javascriptEnabled: true,
                    },
                },
                modifyLessRule: function (lessRule, _context) {
                    lessRule.test = /\.less$/;
                    lessRule.exclude = /\.module\.less$/;
                    return lessRule;
                },
            },
        },
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: lessModifyVars,
                        javascriptEnabled: true,
                    },
                },
                modifyLessRule: function (lessRule, _context) {
                    lessRule.test = /\.module\.less$/;
                    lessRule.exclude = undefined;
                    return lessRule;
                },
                cssLoaderOptions: {
                    modules: { localIdentName: '[local]_[hash:base64:5]' },
                },
            },
        },
    ],
};

[myopenresources]

@LevapVeeskela Thank you for your answer !

[hellobq]

this work for me

{
    plugin: CracoLessPlugin,
    options: {
      lessLoaderOptions: {
        lessOptions: {
          modifyVars: lessModifyVars,
          javascriptEnabled: true,
        },
      },
      modifyLessModuleRule(lessModuleRule, context) {
        lessModuleRule.test = /\.module\.(less)$/
        const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
        cssLoader.options.importLoaders = 4,
        cssLoader.options.modules = {
          localIdentName: "[local]_[hash:base64:5]",
        };
        return lessModuleRule;
      },
    },
  }