在 Ant Design React Typescript 项目中添加对 LESS-modules 的支持

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

经过多次 try/fails 我想通了，如果其他人有兴趣，请发布答案。

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

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

添加 config-overrides.js 配置 ts-import-plugin 按需导入组件，自定义主题 和 更少的模块

// 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;
};

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

import

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

新建文件App.module.less

.red {
    color: red;
}

在 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;

在 Ant Design React Typescript 项目中添加对 LESS-modules 的支持

Adding support for LESS-modules in Ant Design React Typescript project

typescript

antd