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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣面试经典算法150题:整数转罗马数字

整数转罗马数字 今天的题目是力扣面试经典150题中的数组的中等难度题&#xff1a; 整数转罗马数字。 题目链接&#xff1a;https://leetcode.cn/problems/integer-to-roman/description/?envTypestudy-plan-v2&envIdtop-interview-150 题目描述 七个不同的符号代表罗马…

GitHub与Gitee密钥对配置

一、生成 Gitee 的 SSH 密钥对 打开终端&#xff1a; 在 Windows 上可以使用 Git Bash&#xff0c;或在其他操作系统上打开终端。 生成 Gitee SSH 密钥&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_email_for_giteeexample.com" -f ~/.ssh/id_rsa_gitee这里的邮…

SprinBoot+Vue餐厅点餐系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

Python实现HTTP服务器

要在Python中实现一个简单的HTTP服务器&#xff0c;可以使用Python内置的库http.server&#xff0c;它是非常基础但足够演示基本HTTP服务的功能。 1. 导入必要的模块 首先&#xff0c;需要导入http.server和socketserver模块。http.server提供了基础的HTTP服务器功能&#xf…

探索 Linux 内核启动过程

目录 1. Linux 内核启动过程概述2. start_kernel (内核初始化)3. rest_init4. kernel_init5. kthreadd总结 1. Linux 内核启动过程概述 在 Linux (2.6.39.4)系统的启动过程中&#xff0c;内核扮演了至关重要的角色。它负责从系统启动开始&#xff0c;初始化硬件、管理内存、加…

stm32智能颜色送餐小车(ESP8266WIFI模块、APP制作、物联网模型建立、MQTTFX)

大家好啊&#xff0c;我是情谊&#xff0c;今天我们来介绍一下我最近设计的stm32产品&#xff0c;我们在今年七月份的时候参加了光电设计大赛&#xff0c;我们小队使用的就是stm32的智能送餐小车&#xff0c;虽然止步于省赛&#xff0c;但是还是一次成长的经验吧&#xff0c;那…

Byte Pair Encoding(BPE)算法原理以及其python实现

Byte Pair Encoding(BPE)是一种基于统计的压缩算法,最初由Gage于1994年在“A New Algorithm for Data Compression”一文中提出。尽管其初衷是用于数据压缩,但随着自然语言处理(NLP)的发展,BPE被广泛应用于词汇表构建和分词任务中,尤其是在处理形态丰富的语言时表现尤为…

【PostgreSQL教程】PostgreSQL 高级篇之 视图

博主介绍:✌全网粉丝20W+,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。 感兴趣的可…

MySQL基本查询语言

基本查询语言的结构 最简单的查询语句&#xff1a; select...from.... 一个完整的普通查询语句结构如下&#xff1a; select [distinct].....from....[where....][group by .....][having.....][order by.....][limit.....] 查询语句的执行顺序 1. 先执行from子句:基于表进行…

如何结束monkey运行

引言 在 Android 开发过程中&#xff0c;monkey 测试是一种常用的随机测试手段&#xff0c;用于模拟用户的各种操作来发现应用中的稳定性问题。然而&#xff0c;在某些情况下&#xff0c;您可能需要提前结束正在进行的 monkey 测试&#xff0c;比如当您发现了一些重要的问题需…

java在项目中实现excel导入导出

一、初识EasyExcel* 1. Apache POI 先说POI&#xff0c;有过报表导入导出经验的同学&#xff0c;应该听过或者使用。 Apache POI是Apache软件基金会的开源函式库&#xff0c;提供跨平台的Java API实现Microsoft Office格式档案读写。但是存在如下一些问题&#xff1a; 1.1 …

SpringBoot 项目——抽奖系统

本项目主要实现的功能是&#xff1a;主要服务于管理员用户&#xff0c;其可圈选奖品&#xff0c;人员来创建抽奖活动&#xff0c;并进行在线抽奖&#xff0c;并可通过短信或邮件的方式通知中奖者&#xff0c;同时普通用户可查看已结束的抽奖活动的中奖结果&#xff1b; 一、项…

TESSY创建单元测试或集成测试工程

我们以tessy5.1 IDE为例&#xff0c;给大家展示工程的创建过程。 1、打开TESSY5.1软件后&#xff0c;会弹出&#xff1a; 2、点击NEW Project后&#xff0c;会弹出&#xff1a; 3、接下来&#xff0c;就可以打开刚创建的工程&#xff1a; 4、进入到TESSY的主界面后&#xff0c…

Python办公自动化 获取文本数据 支持多种类型文件

学好办公自动化,走遍天下都不怕&#xff01;&#xff01; 前面我们已经学习了&#xff0c;如何用python的下载安装以及入门基础知识&#xff0c;并且也知道如何使用python自动处理Excel文件数据、如何批量生成Word文件、如何对数据分析后生成洞察报告、如何用python实现自动发送…

React中实现antd自定义图标,鼠标悬浮变色

借助 antd 的 tooltip 组件来实现 hover 时变色的效果 1.新建组件 自定义图标一般在iconfont上面获取&#xff0c;复制下来的svg代码&#xff0c;切记要删除 fill 属性后添加到组件中 import { Tooltip } from "antd"; import React from "react";const …

一种后缀数组的奇妙运用

最近参加了thucamp&#xff0c;其中day5的E题是一个有难度的字符串。 大部分人都是用后缀自动机做&#xff0c;我也是这样感觉的&#xff0c;不过想了好一会儿也没有很清晰的思路&#xff0c;但是突然想到了一个用后缀数组建树的方法&#xff0c;我2h码了7kb的代码&#xff0c…

webpack4手动搭建Vue项目

小满视频 很多解释使用通义灵码搜的,通义灵码的搜索结果也是有错误的全程使用pnpm包管理工具&#xff0c;和npm的用法基本一样 学习总结 1. 多看看webpack官网 2. webpack的作用&#xff1a;配置一堆东西&#xff0c;达到运行程序的目的 3. 无论什么东西都转成js&#xff0c;…

理解数据库系统的内部结构

数据库系统在我们的数字世界中扮演着关键角色。本文将介绍数据库系统的内部结构&#xff0c;帮助初学者了解其基本概念。 数据库系统的三级模式 数据库系统内部采用三级模式二级映像结构&#xff0c;包括外模式、模式和内模式。这种结构确保了数据的逻辑独立性和物理独立性。…

51-java jpa和mybatis的区别

‌JPA和MyBatis是两种不同的持久层框架&#xff0c;它们在设计和使用上有显著的区别。‌ ‌JPA&#xff08;Java Persistence API&#xff09;‌ 是一个ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它是Java EE的一部分&#xff0c;旨在通过注解或XML配置来定义实…

CHAMELEON算法原理及Python实践

CHAMELEON&#xff08;变色龙&#xff09;算法是一种两阶段的层次聚类算法&#xff0c;其原理和特点可以归纳如下&#xff1a; 一、算法概述 CHAMELEON算法通过动态建模的方式&#xff0c;结合了数据的初始划分&#xff08;通过图划分算法&#xff09;和一种新颖的层次聚类方…