创建react&ts&antd项目

2021-12-16 11:32:12 阅读：143 来源： 互联网

标签：less App ts loader react import antd css

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

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

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

标签：less,App,ts,loader,react,import,antd,css
来源： https://www.cnblogs.com/fengnovo/p/15697066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

创建react&ts&antd项目