Skip to content

Latest commit

 

History

History
52 lines (47 loc) · 1.45 KB

README.md

File metadata and controls

52 lines (47 loc) · 1.45 KB
  • 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",
}