使用create-react-app + antd快速搭建项目框架

1、搭建本地开发环境

npx create-react-app my-app
cd my-app
yarn start

2、安装antd

antd使用的less，故如需修改其样式，需在项目中进行less的相关配置

yarn eject    //暴露配置文件--仅可使用一次，之后项目文件夹会多出来config文件夹
			  // react脚手架2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并，只有一个webpack.config.js
yarn add less-loader less        // 安装less-loader、less
// 在webpack.config.js文件中的sassRegex和sassModuleRegex下面添加less相关语句，即：
const lessRegex = /.less/; 
const lessModuleRegex = /.module.less$/;
// 下面同样需要添加
{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'sass-loader'
  ),
},
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
}

安装antd

yarn add antd  // 安装antd
import { Button } from 'antd'；  // 在组件中引用

// 实现按需加载 按照官方文档，需添加babel-plugin-import插件
yarn add babel-plugin-import

// 在plugin里添加相关代码
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    
    plugins: [
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent:
                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
            },
          },
        },
      ],
       // 此处添加
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css" // `style: true` 会加载 less 文件
      }]
    ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
    // See #6846 for context on why cacheCompression is disabled
    cacheCompression: false,
    compact: isEnvProduction,
  },
},

再次启动项目即可看到一个antd风格的按钮

3、修改antd默认主题风格

1、// 将style的值修改为true（注意不可添加""）
["import", {
    "libraryName": "antd",
    "libraryDirectory": "es",
    "style": true // `style: true` 会加载 less 文件
    }
]
2、// 修改getStyleLoaders文件
if (preProcessor) {
  if (preProcessor === 'less-loader') { // 如果为less-loader则修改主题色
    loaders.push({
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: false,
        modifyVars: {
          "@primary-color": "#008B8B" // 绿色  其他的也可以在这里写
        },
        javascriptEnabled: true,
      },
    });
  } else {
    loaders.push(
      {
        loader: require.resolve('resolve-url-loader'),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
      {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true,
        },
      }
    );
  }
3、重新执行
yarn
yarn start