react按需引入antd,和使用less

• 安装依赖

  #安装react-app-rewired修改配置create-react-app项目配置
  $ npm install --save-dev react-app-rewired

  #加载less样式
  $ npm install --save react-app-rewire-less

  #使用antd官方的方式，安装babel-plugin-import
  $ npm install --save-dev babel-plugin-import

   

•  

  项目根目录下生成 config-overrides.js 文件，并且输入以下内容：

  const { injectBabelPlugin } = require('react-app-rewired');
  const rewireLess = require('react-app-rewire-less');
  
  module.exports = function override(config, env) {
      config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
      config = injectBabelPlugin(['wrapper', {}], config);
      config = rewireLess.withLoaderOptions({
          modifyVars: { "@primary-color": "#1DA57A" },
      })(config, env);
      return config;
  };

   

• 更新package.json脚本，如下：

// package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
},

• 最后添加less依赖，

$ npm install --save less@^2.7.2

 此时在使用antd组件时不需要手动引入antd的css样式，并且可以在项目中使用less样式文件。