[Support] - How to add less loader

Thank you for this great plugin.

I’m trying to implement ant.design library with the latest version of create react app and craco. I manged to implement the babel import loader, but i’m currently stuck add implementing the less loader.

Ant design documentation on how to implement less loader https://ant.design/docs/react/customize-theme https://ant.design/docs/react/use-with-create-react-app

My implementation with craco:

module.exports = {
  style: {
    less: {
      loaderOptions: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
         },
       javascriptEnabled: true,
      }
    },
  },
  babel: {
    plugins: [
      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "ant"],
    ],
  },
}

I think that I misunderstand the documentation on how to add less-loader support with craco. Any help is welcome!

[jaredjj3]

I’ve Frankensteined together a craco.config.js that accomplishes what you want. This can be extracted into a plugin. I used a fresh install using react-scripts 2.1.1.

// https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewire-less/index.js
const path = require('path');

const loaderNameMatches = function(rule, loaderName) {
  return rule && rule.loader && typeof rule.loader === 'string' &&
    (rule.loader.indexOf(`${path.sep}${loaderName}${path.sep}`) !== -1 ||
    rule.loader.indexOf(`@${loaderName}${path.sep}`) !== -1);
};

const getLoader = function(rules, matcher) {
  let loader;

  // Array.prototype.some is used to return early if a matcher is found
  rules.some(rule => {
    return (loader = matcher(rule)
      ? rule
      : getLoader(rule.use || rule.oneOf || (Array.isArray(rule.loader) && rule.loader) || [], matcher));
  });

  return loader;
};

module.exports = {
  babel: {
    plugins: [
      [
        'import',
        {
          'libraryName': 'antd',
          'libraryDirectory':
          'es',
          'style': true
        },
        'ant'
      ],
    ],
  },
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          const lessExtension = /\.less$/;

          const fileLoader = getLoader(
            webpackConfig.module.rules,
            rule => loaderNameMatches(rule, 'file-loader')
          );
          fileLoader.exclude.push(lessExtension);

          const lessRules = {
            oneOf: [{
              test: lessExtension,
              use: [
                {
                  loader: require.resolve('style-loader')
                }, {
                  loader: require.resolve('css-loader')
                }, {
                  loader: require.resolve('less-loader'),
                  options: {
                    modifyVars: {
                      '@primary-color': '#1DA57A',
                      '@link-color': '#1DA57A',
                      '@border-radius-base': '2px',
                    },
                    javascriptEnabled: true
                  }
                }
              ]
            }]
          }
        
          const oneOfRule = webpackConfig.module.rules.find(rule => (
            typeof rule.oneOf !== 'undefined'
          ));
          const appendTo = oneOfRule ? oneOfRule.oneOf : webpackConfig.module.rules;
          appendTo.push(lessRules);

          return webpackConfig;
        }
      }
    }
  ]
};

[jaredjj3]

It looks like the current implementation does not support a less loader yet.