NeteaseYanxuan / OSSA

Taro官方推荐的企业级多端 UI 库。目前已支持React语法。
https://ossa.miaode.com
MIT License
389 stars 33 forks source link

custom-tab-bar 中使用 Tabbar 组件 icon 不显示 #29

Open comlejade opened 2 years ago

comlejade commented 2 years ago

OSSA version

0.2.0

复现步骤

代码看这里 https://github.com/comlejade/ossaui-demo.git

预期表现?

应该显示icon

实际表现?

实际效果是这样

image

环境信息

taro 3.5.4

其他?

No response

comlejade commented 2 years ago

作为custom-tab-bar的时候icon样式加载不到 image

下面文字的样式却可以 image

comlejade commented 2 years ago

icon组件的样式没有编译到wxss中去,单独引入icon组件样式就可以显示了

image

image

CaedmonW commented 2 years ago

这个问题是因为,组件默认不会引入scss文件,scss文件是通过babel-plugin-import引入或者使用组件时手动引入。 这样当tabbar组件内部引用icon组件时,icon组件的scss文件没有被默认引入。

comlejade commented 2 years ago

这个问题只有在自定义tabbar的时候才会出现,这里我配置了babel-plugin-import,在自定义tabbar中并没有起作用,我试过在app.ts 入口文件中引入样式文件,但是自定义tabbar中还是需要单独引入,其他页面暂时没发现问题

CaedmonW commented 2 years ago

这个问题只有在自定义tabbar的时候才会出现,这里我配置了babel-plugin-import,在自定义tabbar中并没有起作用,我试过在app.ts 入口文件中引入样式文件,但是自定义tabbar中还是需要单独引入,其他页面暂时没发现问题

  1. babel-plugin-import只会自动引入tabbar的样式,但是不会引入icon的样式(这里是有点问题的,我们看下有没有既兼容按需引入又能解决这个问题的方法)
  2. 如果项目的其他页面也引入tabbar,tabbar的样式会被提取到common.wxss文件中,custom-tab-bar中不会再输出样式文件,但是自定义tabbar只会读取custom-tab-bar文件夹下的样式文件,导致自定义tabbar样式缺失
geekact commented 1 year ago

Button组件也有这个问题,不然就类似antd一样搞一个导出?

import { IconAdd, IconClose } from 'ossaui';