配置步骤：

  • 引入react-app-rewired插件
    react-app-rewired的作用就是在不eject的状况下,笼罩create-react-app的配置
  • 装置customize-cra
    npm install react-app-rewired customize-cra --save-dev
  • 批改 package.json 里的启动配置
/* package.json */"scripts": {-   "start": "react-scripts start",+   "start": "react-app-rewired start",-   "build": "react-scripts build",+   "build": "react-app-rewired build",-   "test": "react-scripts test --env=jsdom",+   "test": "react-app-rewired test --env=jsdom",}
  • 在配置文件 config-overrides.js中批改
const {    override,    addLessLoader, // less配置函数    fixBabelImports, // 按需加载配置函数    addBabelPlugins, // babel插件配置函数    addWebpackAlias, // /门路别名} = require('customize-cra');const path = require("path");module.exports = override(    ...addBabelPlugins( // 反对装璜器        [            '@babel/plugin-proposal-decorators',            { legacy: true}        ]    ),    fixBabelImports('import', { // antd 按需加载        libraryName: 'antd',        libraryDirectory: 'es',        style: true  //主动打包相干的款式 默认为 style:'css',这里须要改为true    }),    addLessLoader(        {            javascriptEnabled: true,            modifyVars: { '@primary-color': '#004080' }  //这里也能够配置全局的款式变量,不倡议在配置文件中增加,这个批改@primary-color次要是为了批改antd的主题色        }    ),    addWebpackAlias({ //门路别名        '@': path.resolve(__dirname, 'src'),    }),    (config) => {        //批改、增加loader 配置 :        // 所有的loaders规定是在config.module.rules(数组)的第二项        // 即：config.module.rules[2].oneof  (如果不是，具体能够打印 一下是第几我的项目)        // 批改 less 配置 ，规定 loader 在第7项(具体能够打印配置)        const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;        console.log(loaders)        loaders[7].use.push({            loader: 'style-resources-loader',            options: {                patterns: path.resolve(__dirname, 'src/style/common.less')//全局引入公共的scss 文件            }        })        return config    })
  • common.less
@import 'reset.less';@import 'variable.less';.center {    display: flex;    align-items: center;    justify-content: center;}
  • variable.less,须要增加全局款式变量，间接在这个文件增加
@primary-color: #004080;@bg-gray-color: #F4F4F4;