precondition

The Node version must be at least 4.0. Node6+ and NPM3 + are officially recommended. Create-react-app is also easy to install globally using the NPM command.

npm install -g create-react-app

Create a new app

create-react-app my-app

cd my-app/

Run the app in development mode.

npm start

Change the open port number in package.json

{
  "name": "smart-customer-service"."version": "0.1.0 from"."private": true."dependencies": {
    "antd": "^ 3.5.3." "."axios": "^ 0.18.0." "."react": "^ 16.3.2"."react-dom": "^ 16.3.2"."react-loadable": "^ 5.4.0"."react-router": "^ 4.2.0"."react-router-dom": "^ 4.2.2." "."react-scripts": "^ 1.1.4." "
  },
  "scripts": {<! -- Change the local open port number of the project -->"start": "set PORT=3006 && react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test --env=jsdom"."eject": "react-app-rewired eject"
  },
  "devDependencies": {
    "babel-plugin-import": "^ 1.7.0"."react-app-rewire-less": "^ 2.1.1"."react-app-rewired": "^ 1.5.2." "}, <! -- Webpack agent, cross-domain -->"proxy": "http://10.60.34.7:8080"
}
Copy the code

Install less & less-loader

yarn add less less-loader

Method one:

Expose the WebPack configuration file

yarn eject

Find webpack.config.js in the config folder

Two changes have been made to the configuration file

The first is to find cssRegex and cssModuleRegex and create new lessRegex and lessModuleRegex variables underneath them

The second is to add the less-loader configuration

The specific modifications are as follows

// The first block is about line 38
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// The second block is about 318 lines
 / / configuration is less
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),}, {test: lessModuleRegex,
    use: getStyleLoaders(
        {
          importLoaders: 2.modules: true.getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'),},Copy the code

If an error occurs

yarn add @babel/plugin-transform-react-jsx-source

Method 2:

Introduce react-app-rewired and modify the startup configuration in package.json

$ yarn add react-app-rewired customize-cra
Copy the code
/* 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",
+   "test": "react-app-rewired test",}Copy the code

Create a config-overrides. Js file in the project root directory to modify the default configuration

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
   modifyVars: { '@primary-color': '#1DA57A'}}));Copy the code

or

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireSvgReactLoader = require('react-app-rewire-svg-react-loader');

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],config);
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireSvgReactLoader(config, env);
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true, // Fix lesson 3 webPack build error // ANTD global configuration style modifyVars: {'body-background':'#E3E7EE'.'layout-header-height':'70px'.'table-header-bg':'#F7FAFC'.'border-radius-base':'0'.'@btn-default-bg': '#6995FF'.'@btn-default-color': '#fff',
    }
  })(config, env);
  return config;
}
Copy the code