創建react&ts&antd項目

1.按照 https://ant.design/docs/react/use-in-typescript

npx create-react-app antd-demo-ts --template typescript

cd antd-demo-ts
yarn start

  yarn add antd

2. 還原打包代碼，這樣可以修改打包出來的靜態資源目錄，和修改端口

npm run eject

3.修改 src/App.tsx

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

4.修改src/App.css

@import '~antd/dist/antd.css';

5.將css改成less，修改 config/webpack.config.js

將module的rules選項增加一個 test: /\.less$/i,這段

module: {
      strictExportPresence: true,
      rules: [
        // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
          enforce: 'pre',
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
          loader: require.resolve('source-map-loader'),
        },
        ...
         {
              test: /\.less$/i,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader',
                },
                {
                  loader: 'less-loader',
                  options: {
                    lessOptions: {
                      javascriptEnabled: true,
                      modifyVars: {
                        'root-entry-name': 'default',
                        'primary-color': '#6256c9',
                        'link-color': '#6256c9',
                        'border-radius-base': '6px',
                      },
                      javascriptEnabled: true,
                    },
                  },
                },
              ],
            },
    ...

          ],
        },
      ].filter(Boolean),
    },

6.增加less和less-loader

yarn add less less-loader

7.

/* src/App.ts */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';