在 Ant Design React Typescript 项目中添加对 LESS 模块的支持

Question

我创建了新的 React Ant Design 项目，使用打字稿，使用命令：

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

关注official Ant Design documentation

现在我想在我的项目中添加对 LESS 模块 的支持，而不是弹出。我曾尝试关注多篇关于修改config-overrides.js 文件的文章，但均未成功。任何人都可以正常工作并可以共享配置吗？

Answer 1

经过多次尝试/失败后，我想通了，如果其他人感兴趣，请发布答案。

1. 安装与 react-scripts-ts v2.16.0 兼容的react-app-rewire-less-modules：

$ yarn add react-app-rewire-less-modules@1.1.0 -D

1. 添加 config-overrides.js 并配置 ts-import-plugin 用于按需导入组件、自定义主题和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;
};

1. 在新文件style-modules.d.ts 中将.css 和.less 声明为Typescript 模块，以便在步骤#5 中使用import

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

4. 创建新文件App.module.less

.red {
    color: red;
}

5. 将 LESS 作为模块导入 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;