【前端】react与antd-mobile配置config-overrides.js文件

配置antd-mobile自定义主题、antd-mobile样式按需加载、别名、组件写px适配转rem

在根目录添加antd-theme.json文件并加代码

{
    "@brand-primary": "#00c65c",
    "@color-text-base-inverse": "#fff"
}

在根目录添加config-overrides.js文件添加如下代码

const { override, fixBabelImports, addLessLoader,addWebpackAlias,addDecoratorsLegacy } = require('customize-cra');
const path = require("path")
const rewirePostcss = require('react-app-rewire-postcss');
const px2rem = require('postcss-px2rem')
const theme = require('./antd-theme');
module.exports = override(
    addLessLoader({  //自定义主题
      javascriptEnabled: true,
      modifyVars: theme,
    }),
    fixBabelImports('import', {  //按需加载样式
      libraryName: 'antd-mobile',
      libraryDirectory: 'es',
      style: true,
    }),
    addWebpackAlias({  //别名
        assets: path.resolve(__dirname,'./src/assets/'),
        '@': path.resolve(__dirname,'./src/components/'),
        '@pages': path.resolve(__dirname,'./src/pages/'),
        '@store': path.resolve(__dirname,'./src/store/'),
        '@utils': path.resolve(__dirname,'./src/utils/'),
        '@config': path.resolve(__dirname,'./src/config/'),
        '@redux': path.resolve(__dirname,'./src/redux/'),
        '@api': path.resolve(__dirname,'./src/api/')
    }),
    addDecoratorsLegacy({
        "babel": {
            "plugins": [
              [
                "@babel/plugin-proposal-decorators",
                {
                  "legacy": true,
                }
              ]
            ],
            "presets": [
              "react-app"
            ]
        }
    }),

    (config,env)=>{
        // 重写postcss
        rewirePostcss(config,{   
            plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('postcss-preset-env')({
                    autoprefixer: {
                        flexbox: 'no-2009',
                    },
                    stage: 3,
                }),
              //关键:设置px2rem
                px2rem({
                    remUnit: 37.5,
                    exclude:/node-modules/
                })
            ],
        });
        
        
        return config
    }
);