npx create-react-app react-test
Cesium静态资源需要webpack配置,执行npm run eject可以生成webpack配置,运行前先查看当前git版本是否有提交,如果未提交,需要先本地提交git,否则npm run eject会执行失败。
git add .
git commit -m "React Init"
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
npm i less less-loader -S
①修改前
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配置
① 修改前
{
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'
)
},
npm i antd
在index.css或者App.css中引入
@import 'antd/dist/antd.css';
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 (
{row.type === 1 ? <>{row.label} > : }
)
})
}
export default function navOne() {
return (
{/* 搜索 */}
{/* 内容 */}
{/* 底部 */}
)
}