jd-opensource / jd-opensource/taro-ui
能否增加css按需要加载对类babel-plugin-import插件的支持?
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**这个功能解决了什么问题?**
加上该功能的支持之后就再也不用手动引用对应的样式了,由插件自动去加载组件对应的样式,对开发人员很友好啊。
Ps: 主流的UI库基本都支持呢
**你期望的功能是怎样的?**
```
import { AtButton } from 'taro-ui'
↓ ↓ ↓ ↓ ↓ ↓
var button = require('taro-ui/lib/components/button');
require('taro-ui/dist/style/components/button.scss');
require('taro-ui/dist/style/components/loading.scss');
```
**补充信息**
目前使用babel-plugin-import基本上能做到`单组件`的按需加载,但是对一些`复合组件`来说,就显得无能为力了。
```
module.exports = {
presets: [
['taro', {
framework: 'react',
ts: false
}]
],
plugins: [
[
"import", {
libraryName: "taro-ui",
libraryDirectory: `lib/components`,
customName: function (name) {
let component = name[0].toLowerCase() + name.substr(1);
component = component.replace(/at-/, '').replace(/([A-Z])/g, $1 => `-${$1.toLowerCase()}`);
return `taro-ui/lib/components/${component}`
},
customStyleName: function (name) {
const component = name.replace(/at-/, '')
return `taro-ui/dist/style/components/${component}.scss`
}
},
"taro-ui"
]
]
}
```
```
// 单组件
import { AtAvatar } from 'taro-ui'
↓ ↓ ↓ ↓ ↓ ↓
var button = require('taro-ui/lib/components/avatar');
require('taro-ui/dist/style/components/avatar.scss');
```
```
// 复合组件
import { AtButton } from 'taro-ui'
↓ ↓ ↓ ↓ ↓ ↓
var button = require('taro-ui/lib/components/button');
require('taro-ui/dist/style/components/button.scss');
/* AtButton组件依赖的loading组件就无法自动处理,这个就需要手动补充。要是能在button.scss中处理对loading的依赖就完美了
require('taro-ui/dist/style/components/loading.scss');
*/
```
Contributor guide
Assessment
This issue has not been assessed yet.