首页 > 其他分享 >vite构建的react+ts项目中使用arcodesign组件的问题

vite构建的react+ts项目中使用arcodesign组件的问题

时间:2024-01-15 14:24:46浏览次数:42  
标签:arcodesign ts react plugins 组件 arco vite

今天在react项目中使用arcodesign组件库,引入的图标巨大无比,调样式也不起作用,如下图。

网上找了也没看到类似的问题,去官网文档里看,发现是没有引入组件的样式。在我这个vite构建的react+ts项目中找到两个解决办法:第一个是直接引入全部样式

import "@arco-design/web-react/dist/css/arco.css";

第二个是设置按需加载的插件,react+ts的指导文档:https://github.com/arco-design/arco-plugins/blob/main/packages/plugin-vite-react/README.zh-CN.md,其他项目设置去官网找。下载插件包,然后在vite.config.ts中配置插件的选项。这里插件有默认参数,默认是引入样式了,还需下载less包,如果需要进行其他设置可以看指导文档。

npm i @arco-plugins/vite-react -D
npm install -D less
import { vitePluginForArco } from '@arco-plugins/vite-react'
export default defineConfig({
  plugins: [
    vitePluginForArco(),
  ],
})

这样我们引入的图标和组件就能正常显示了。

 

标签:arcodesign,ts,react,plugins,组件,arco,vite
From: https://www.cnblogs.com/panglinglong/p/17965253

相关文章

  • react native 使用 FlatList 实现单选列表组件
    1.最终效果:2.实现代码:importReact,{useState}from'react';import{FlatList,SafeAreaView,StatusBar,StyleSheet,Text,TouchableOpacity,}from'react-native';constDATA=[{id:'zh_CN',title:&#......
  • echarts记录篇(四):堆积图记录
    (data)=>{console.log("data:")console.log(data);if(data){varbw=30;varitemGap=10;varcategories1=[];varcategories2=[];varcategories3=[];varcategories4=[];varcategories5=[];......
  • 想给组件加上进入离开动画?试试 react-transition-group
    列表是很常见的场景:如果我们想给它加上进入离开的动画效果:怎么做呢?一般我们会用react-transition-group来做。在npm官网可以看到,这个包每周有750w下载量,还是非常流行的:那这个包怎么用呢?我们写下代码试一下:npxcreate-react-apptransition-group-test用create-react-app创......
  • 一道字节的 TS 体操面试真题
    前天,小册群友问了我一个TS体操问题,说是面字节时遇到的。今天又催了一下:面试题是这样的:让实现这个FormatDate的类型,用来限制字符串只能是指定的日期格式。看起来好像没多大难度,就是提取出YY、MM、DD和分隔符,然后构造对应的字符串类型就好了。但上手试了一下,还真没那么简单。首......
  • 下一代APP Store——GPT应用商店GPTs初体验
    uploading-image-126879.png近期,OpenAI宣布GPT应用商店正式上线,目前拥有plus的用户已经可以体验了。OpenAI将GPT应用商店命名为GPTs,这也是之前发布会就宣传的内容,终于上线了。简单的说,GPT应用商店类似于手机上的应用商店,在这里用户可以自己做一个应用发布,也可以使用别人的应用。......
  • 20款最好的免费 Bootstrap 后台管理和前端模板
    20款最好的免费Bootstrap后台管理和前端模板 AdminBootstrapTemplatesFreeDownload 1.SBAdmin2Preview | Details&Download2.AdminLitePreview | Details&Download3.DirectorResponsiveAdminTemplateFreePreview | Details&Download4......
  • 关于echarts+vue频繁刷新的造成的内存增长问题
    前言关于解决echarts+ws多次数据刷新渲染,内存增长溢出的尝试。记录一下,便于下次使用有参考方法关闭echarts动画tooltip的动画设置为false。(echarts动画会缓存,通过快照可以看出)tooltip:{axisPointer:{animation:false,//很重要!},......
  • 初中英语优秀范文100篇-058The Importance of Doing Sports-做运动的重要性
    PDF格式公众号回复关键字:SHCZFW058记忆树1Nowadays,moreandmorepeopleprefertostayathomewatchingTVandsurfingtheInternet,whichleadstofatnessandevenseriousillness.翻译如今,越来越多的人更喜欢待在家里看电视和上网,这导致了肥胖,甚至严重的疾病......
  • DIANN-MSstats groupComparison Issue: undefined columns selected
    1.Whaterrormessagedidyouencounter?Errorin`[.data.frame`(as.data.frame(comparisons),,cols):undefinedcolumnsselected 2.Howdidyousolvetheerror?install.packages("lme4",type="source") 3.Whatarethepos......
  • ArkTS父子组件双向绑定案例
     /***父子组件双向互绑定*///自定义按钮的信息类型classButtonState{value:stringwidth:numberconstructor(value:string,width:number){this.value=valuethis.width=width}}@ComponentstructMyChildGreenButton{//拥有绿色......