Modify Less module rule for all files in a directory

[ppyoosef]

Hi

I am using antd as a UI toolkit. I want to implement style modules in my project. I tried like this

   `modifyLessRule(lessRule, context) {
      // You have to exclude these file suffixes first,
      // if you want to modify the less module's suffix
      // const relativePath = path.relative(context, resourcePath);
      console.log(context)
      lessRule.exclude = /\.less$/;
      return lessRule;

      
    },
    modifyLessModuleRule(lessModuleRule, context) {
      // Configure the file suffix
      lessModuleRule.test = /\.less$/;

      // Configure the generated local ident name.
      const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
      cssLoader.options.modules = {
        localIdentName: "[local]_[hash:base64:5]",
      };

      return lessModuleRule;
    },`

But it applied to all less files including antd library. I want to apply only for styles inside the src folder. I know we can do by renaming all style files inside the src folder with some suffix (index.m.less) and change the regex.

I want to keep my style file as formatted now (index.less). Is there any option to apply modify rule only for my src folder?

[cdllqos]

@ppyoosef
I configured like this solved my problem

// craco.config.ts
const CracoLessPlugin = require('craco-less');
const lessModuleReg = /src\/(pages|components).*\.less/;

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule(lessRule: any) {
          lessRule.exclude = lessModuleReg;
          return lessRule;
        },
        modifyLessModuleRule(lessRule: any) {
          lessRule.test = lessModuleReg;
          lessRule.exclude = /node_modules/;
          return lessRule;
        },
      },
    },
  ],
};

[luke-0813]

please read that: https://github.com/DocSpring/craco-less#css--less-modules
you can try to add declare for module.less to d.ts(like react-app-env-d.ts)
declare module "*.module.less" { const classes: { readonly [key: string]: string }; export default classes; }