ce4c83ff
 wxy
初始提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
# PostCSS Wxss
[PostCSS] plugin for wxss.
专门为 wxss 格式化处理的的一个 postcss 插件，特别是在做 css 转 wxss 的时候好用到爆。
## 实现的功能
- 清理 wxss 不支持的选择器。
- 清理 wxss 不支持的注释。
- 转换 rem 单位到 rpx。
- 转换 Web 的标签选择器到小程序的 class 选择器。
- style scoped（postcss插件部分）。
``` css
/* 被清理 */
* {
margin: 100px
}
/* 保持原样 */
view {
width: 50rpx;
}
.container {
width: 7.5rem;
font-size: .24rem
}
/* Web 标签转换 */
div {
width: 50rpx;
}
ul li {
width: 50rpx;
}
body {
width: 50rpx;
}
```
``` css
view {
width: 50rpx;
}
.container {
width: 50rpx;
font-size: 24.4rpx
}
._div {
width: 50rpx;
}
._ul ._li {
width: 50rpx;
}
page {
width: 50rpx;
}
```
## Usage
```js
postcss([ require('postcss-mpvue-wxss') ])
```
or use `.postcssrc.js`
```
// https://github.com/michael-ciniawsky/postcss-load-config
const optopns = {}
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-mpvue-wxss": optopns
}
}
```
with options:
```
const replaceTagSelectorMap = require('postcss-mpvue-wxss/lib/wxmlTagMap')
const optopns = {
cleanSelector: ['*'],
remToRpx: 100,
replaceTagSelector: Object.assign(replaceTagSelectorMap, {
'*': 'view, text' // 将覆盖前面的 * 选择器被清理规则
})
}
```
更多详细文档请查阅 [mpvue-webpack-target](http://mpvue.com/build/mpvue-webpack-target/)。
bug 或者交流建议等请反馈到 [mpvue/issues](https://github.com/Meituan-Dianping/mpvue/issues)。
See [PostCSS] docs for examples for your environment.
[PostCSS]: https://github.com/postcss/postcss
|
