jd-opensource / jd-opensource/taro-ui

能否增加css按需要加载对类babel-plugin-import插件的支持?

Open
#1,305 2 comments 4 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.