create-react-app myapp --scripts-version=react-scripts-ts
cd ./myapp
yarn add antd --save
yarn add react-app-rewired react-app-rewire-less ts-import-plugin --dev
- Add
config-overrides.js
file.
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
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 = rewireLess.withLoaderOptions({
modifyVars: {
'@primary-color': '#1DA57A', // Override primary color
'@font-family': 'Tahoma' // Override font name
// ... more overrides
},
})(config, env);
return config;
}
- Update
package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start --scripts-version react-scripts-ts",
- "build": "react-scripts build",
+ "build": "react-app-rewired build --scripts-version react-scripts-ts",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
}