base on react-scripts-ts@2.17.0
create a new project with create-react-app
create-react-app myapp --scripts-version=react-scripts-ts-antd
Include ts-import-plugin for importing components on demand.
// source
import { Card } from 'antd';
// output
import Card from 'antd/lib/card';
import Card from 'antd/lib/card/style/index.less';
Include react-app-rewired
You can rewire your webpack configurations without eject.
// You can get all default loads
const { loaders } = require('react-scripts-ts-antd');
- use
less-loader
forless
. - use precss for
scss
.
// tsconfig.json
{
"allowSyntheticDefaultImports": "true",
"experimentalDecorators": "true"
}
If you want to customize theme by overriding less variables like below.
// index.less
@import "~antd/dist/antd.less";
@primary-color: #000;
You have imported all styles and ts-import-plugin
will import styles again. So you need to reset ts-loader
options by modifying config-overrides.js
to avoid importing styles twice.
// config-overrides.js
const { getLoader } = require("react-app-rewired");
const tsImportPluginFactory = require('ts-import-plugin');
module.exports = function override(config, env) {
// get tsloader
const tsloader = getLoader(
config.module.rules,
rule => String(rule.test) == String(/\.(ts|tsx)$/)
);
// set new options
tsloader.options = {
transpileOnly: true,
getCustomTransformers: () => ({
before: [
tsImportPluginFactory([
{
libraryName: 'antd',
libraryDirectory: 'lib',
},
{
libraryName: 'antd-mobile',
libraryDirectory: 'lib',
}
])
]
})
}
return config;
};
This package includes scripts and configuration used by Create React App.
Please refer to its documentation:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.