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>
  )
}