antd - Añadiendo soporte para módulos LESS en un proyecto de Ant Design React con Typescript

He creado un nuevo proyecto de React Ant Design, con TypeScript, con el comando:

create-react-app my-project --scripts-version=react-scripts-ts-antd

siguiendo la documentación oficial de Ant Design

Ahora quiero agregar soporte para módulos LESS en mi proyecto, sin ejectuar. He intentado seguir varios artículos sobre cómo modificar el archivo config-overrides.js, sin ningún éxito. ¿Alguien lo ha logrado y puede compartir las configuraciones?

Respuesta #1

Después de muchos intentos fallidos lo descubrí, publicando la respuesta por si a otros les interesa.

1. Instala react-app-rewire-less-modules que sea compatible con react-scripts-ts v2.16.0:

$ yarn add [email  -D

2. Agrega config-overrides.js con la configuración para ts-import-plugin para la importación de componentes bajo demanda, tematización personalizada y módulos LESS

// config-overrides.js
const tsImportPluginFactory = require('ts-import-plugin');
const { getLoader } = require('react-app-rewired');
const rewireLessModules = require('react-app-rewire-less-modules');

module.exports = function override(config, env) {
    const tsLoader = getLoader(
        config.module.rules,
        rule =>
            rule.loader &&
            typeof rule.loader === 'string' &&
            rule.loader.includes('ts-loader')
    );

    tsLoader.options = {
        getCustomTransformers: () => ({
            before: [ tsImportPluginFactory({
                libraryDirectory: 'es',
                libraryName: 'antd',
                style: true
            }) ]
        })
    };

    config = rewireLessModules.withLoaderOptions(
        `${env === 'production' ? 'wmf' : '[path][name]__[local]-'}-[hash:base64:8]`, {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#1DA57A' }
        })(config, env);

    return config;
};

3. Declara .css y .less como módulos de Typescript en un nuevo archivo style-modules.d.ts, para poder usar import en el paso #5

// style-modules.d.ts
declare module '*.css';
declare module '*.less';

4. Crea un nuevo archivo App.module.less

.red {
    color: red;
}

5. Importar LESS como módulo en App.tsx

import { Button } from 'antd';
import * as React from 'react';
import './App.css';
import styles from './App.module.less';

class App extends React.Component {
    public render() {
        return (
            <div className="App">
                <Button type="primary">Button</Button>
                <p className={styles.red}>
                    LESS Modules
                </p>
            </div>
        );
    }
}

export default App;