react antd 修改默认样式重写less

1.npm install react-app-rewired customize-cra --save-dev

/* 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",

}

2.然后在项目根目录创建一个config-overrides.js 用于修改默认配置。

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const theme = require('./your-theme-file');

module.exports = override(

    addLessLoader({

      lessOptions:{

        javascriptEnabled:true ,

        modifyVars:theme,

        cssModules: {

          localIdentName: "[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.

        },

        sourceMap: true,

      },

    }),

    fixBabelImports('import', {

      libraryName: 'antd-mobile',

      libraryDirectory: 'es',

      style: true,

    }),

);

3.创建 your-theme-file.json  编写替换 antd属性

{

    "@brand-primary": "#d7000f"

}

4.package.json

{

  "name": "web-app",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^4.2.4",

    "@testing-library/react": "^9.5.0",

    "@testing-library/user-event": "^7.2.1",

    "core-js": "^3.6.5",

    "react": "^16.13.1",

    "react-app-polyfill": "^1.0.6",

    "react-dom": "^16.13.1",

    "react-scripts": "3.4.2"

  },

  "scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app"

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all",

      "ie > 9"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version",

      "ie > 9"

    ]

  },

  "devDependencies": {

    "babel-plugin-import": "^1.13.0",

    "customize-cra": "^1.0.0",

    "less": "^3.12.2",

    "less-loader": "^6.2.0",

    "react-app-rewired": "^2.1.6"

  }

}