React项目-less、antd配置

一、创建Reract项目

1、创建React项目

npx create-react-app react-test

2、运行eject

        Cesium静态资源需要webpack配置，执行npm run eject可以生成webpack配置，运行前先查看当前git版本是否有提交，如果未提交，需要先本地提交git，否则npm run eject会执行失败。

（1）提交git（如果版本已经提交，无需执行）

git add .
git commit -m "React Init"

（2）执行npm run eject

npm run eject// 执行成功后，生成的文件列表
// config/
//    jest/
//    webpack/
//    env.js
//    getHttpsConfig.js
//    modules.js
//    paths.js
//    webpack.config.js
//    webpackDevServer.config.js// scripts/
//    build.js
//    start.js
//    test.js

二、less配置

1、安装less、less-loader

npm i less less-loader -S

2、配置webpack.config.js文件

（1）搜索“sassRegex”，查找sass配置

        ①修改前

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

        ② 修改后，在sass配置后添加less配置

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/; // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置

（2）继续向下查找sass配置

        ① 修改前

{test: sassRegex,exclude: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'icss',},},'sass-loader'),sideEffects: true,
},
{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader'),
},

        ② 修改后，在sass配置后添加less配置

{test: sassRegex,exclude: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'icss',},},'sass-loader'),sideEffects: true,
},
{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'sass-loader'),
},// 新增less配置
{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},'less-loader'),sideEffects: true,
},
{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader')
},

三、antd配置

1、安装antd

npm i antd

2、引入antd.css

        在index.css或者App.css中引入

@import 'antd/dist/antd.css';

3、组件中使用

import "../css/Home.less"
import { Input, Button } from 'antd'const searchModel = [{ id: 1, label: "姓名", type: 1 },{ id: 2, label: "性别", type: 1 },{ id: 3, label: "年龄", type: 1 },{ id: 4, label: "身高", type: 1 },{ id: 5, label: "搜索", type: 2 },
]function FilterSearch() {return searchModel.map(row => {return (<li key={row.id}>{row.type === 1 ? <><span>{row.label}</span> <Input size="large" placeholder="default size" /></> : <Button type="primary">{row.label}</Button>}</li>)})
}export default function navOne() {return (<div className="homeContent">{/* 搜索 */}<ul className="homeSearch"><FilterSearch /></ul>{/* 内容 */}<div className="homeSection"></div>{/* 底部 */}<div className="homeFooter"></div></div>)
}