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