配置步骤：

  • 引入react-app-rewired插件
    react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置

  • 安装customize-cra
    npm install react-app-rewired customize-cra --save-dev

  • 安装style-resources-loader
    npm install style-resources-loader

  • 修改 package.json 里的启动配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 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中修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    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

    1
    2
    3
    4
    5
    6
    7
    @import 'reset.less';
    @import 'variable.less';
    .center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

  • variable.less,需要添加全局样式变量，直接在这个文件添加

    1
    2
    3
    @primary-color: #004080;
    @bg-gray-color: #F4F4F4;