I want to use less and less module at the same time. How can I configure it

[docspring]

I want to use less and less module at the same time. How can I configure it

[langarus]

@taoxhsmile thanks a lot. I found the answer yesterday, and I thought that I updated the comment here. But it's good that you posted your code. I just added the same plugin again at the beginning. I didn't see the need to use CracoAntDesignPlugin as you can already use modifyVars in CracoLessPlugin

This could have been solved much easier i think if craco would use a newer version of react-scripts and css-loader. Because css-loader has an option to automatically detect if the file is simple or module and treat it accordingly. It's only available from css-loader 3.5, and this project only uses 3.4. But hey, we can't complain, it's free.

Here is my final craco.config.js:

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

// this is a variable that's going to be available in both .less and .module.less files
const modifiedTheme = {
  "@primary-color": "#1DA57A",
};

module.exports = {
  plugins: [
    // This plugin takes care of the .less files
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: modifiedTheme,
          },
        },
      },
    },
    // This plugin take scare of the .less.module files
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule: function (lessRule, _context) {
          lessRule.test = /\.(less)$/;
          lessRule.use = [
            {
              loader: "style-loader",
            },
            {
              loader: "css-loader",
              options: {
                modules: true,
              },
            },
            {
              loader: "less-loader",
              options: {
                lessOptions: {
                  modifyVars: modifiedTheme,
                  javascriptEnabled: true,
                },
              },
            },
          ];
          lessRule.exclude = /node_modules/;
          return lessRule;
        },
      },
    },
  ],
};

[CreazyJack]

But how can i use less module?
Help!

[taoxhsmile]

I deal with this by configuring two plugins.

const lessLoaderOptions = {
  lessOptions: {
    modifyVars: { '@primary-color': '#ff6a00', '@link-color': '#ff6a00' },
    javascriptEnabled: true,
  },
};
module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        lessLoaderOptions,
      },
    },
    {
      plugin: CracoLessPlugin,
      options: {
        cssLoaderOptions: {
          modules: { localIdentName: '[local]_[hash:base64:5]' },
        },
        lessLoaderOptions,
        modifyLessRule(lessRule, context) {
          lessRule.test = /\.module\.less$/;
          // lessRule.exclude = /node_modules/;
          delete lessRule.exclude;
          return lessRule;
        },
      },
    },
  ],
}

[fanck0605]

Hello, it would be great if someone could please help by submitting a PR that adds this functionality. Thank you!

@ndbroadbent I have created a pull request to add this feature.

Now, we can use less and less module at the same time without any additional configuration.

[CreazyJack]

me too!

[epver]

I read the source code, it seems that this function has not been added, I hope the author can add this function.

[langarus]

This would be great if it would get patched

[ndbroadbent]

Hello, it would be great if someone could please help by submitting a PR that adds this functionality. Thank you!

[langarus]

For now I've managed to interpret .module.less into css modules as such

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule: function (lessRule, _context) {
          lessRule.test = /\.(less)$/;
          lessRule.use = [
            {
              loader: "style-loader",
            },
            {
              loader: "css-loader",
              options: {
                modules: true,
              },
            },
            {
              loader: "less-loader",
              options: {
                lessOptions: {
                  modifyVars: { "@primary-color": "#1DA57A" },
                  javascriptEnabled: true,
                },
              },
            },
          ];
          lessRule.exclude = /node_modules/;

          return lessRule;
        },
      },
    },
  ],
};

But in this way I lose the ability to have global .less files. It's not that big of a deal, but if anyone has an idea, it would be great.