react按需引入样式和自定义主题

react按需引入样式和自定义主题

1、按需引入样式

参考
https://3x.ant.design/docs/react/use-with-create-react-app-cn中的高级配置部分
干货直接按照操作即可，无需深究原理
①引包 yarn add react-app-rewired customize-cra

②把package.json中的scripts部分修改

  "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"  
      }, 

③引入babel插件 yarn add babel-plugin-import

④ 在项目根目录创建一个 config-overrides.js 用于修改默认配置 内容如下:

 //配置具体修改规则 
 const { override, fixBabelImports } =require("customize-cra"); 
 module.exports = override(  
 fixBabelImports("import", {
     libraryName: "antd",
     libraryDirectory: "es",
     style: "css",   }) );

⑤删除项目中的原来引入antd的样式，重启

2、自定义主题

①yarn add less less-loader 版本号用上面的
②修改config-overrides.js

  const {override, fixBabelImports, addLessLoader} = require('customize-cra');
 
 module.exports = override(   
 // 针对antd实现按需打包:根据import来打包(使用babel-plugin-import)   
 fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: true,  // 自动打包相关的样式   
     }),
   // 使用less-loader对源码中的less的变量进行重新指定   
   addLessLoader({
     javascriptEnabled: true,
     modifyVars: {'@primary-color': '#FF4500'},   
     }), 
     )

以上引包请参看版本号,版本不一样差别极大

 "dependencies": {
    "antd": "3.26.19",
    "babel-plugin-import": "1.11.0",
    "customize-cra": "0.2.12",
    "less": "3.9.0",
    "less-loader": "5.0.0",
    "react": "16.10",
    "react-app-rewired": "2.1.3",
    "react-dom": "16.10",
    "react-scripts": "3.0.1",
    "web-vitals": "^2.1.4"
  }