Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
taoxhsmile opened this issue Jul 9, 2020 · 9 comments

Comments

@taoxhsmile
Copy link

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

@CreazyJack
Copy link

me too!

@CreazyJack
Copy link

But how can i use less module?
Help!

@epver
Copy link

epver commented Aug 26, 2020

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

@langarus
Copy link

This would be great if it would get patched

@ndbroadbent
Copy link
Member

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

@langarus
Copy link

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.

@taoxhsmile
Copy link
Author

taoxhsmile commented Sep 15, 2020

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;
        },
      },
    },
  ],
}

@langarus
Copy link

@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;
        },
      },
    },
  ],
};

@fanck0605
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants