Question

我用命令创建了新的React Ant Design项目，

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

跟随official Ant Design documentation

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

Answer 1

经过多次尝试/失败后，我发现了这个问题，如果其他人感兴趣，请发布答案。

安装与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 的配置，以便按需导入组件，自定义主题和 LESS模块 < / li>

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

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

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

创建新文件App.module.less

.red {
    color: red;
}

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

在Ant Design React Typescript项目

1 个答案: