有這么一個(gè)需求，就是需要從Vue的頁(yè)面轉(zhuǎn)小程序，也就是說(shuō)，
- html-->view,
- stylus-->css
- rem-->rpx
以下為解決方案：
一.裝一個(gè)git包，按照教程啟動(dòng)
1.https://github.com/txs1992/stylus-converter
1. First fork project and then clone project to local
git clone git@github.com:<your github>/stylus-converter.git
2. Enter the project directory
cd stylus-converter
3. Installation project depends
npm install
4. Go to line 581 of the `node_modules/stylus/lib/lexer.js` file.
5. Modify the code below.
// before modification
if ('/' == this.str[0] && '/' == this.str[1]) {
var end = this.str.indexOf('\n');
if (-1 == end) end = this.str.length;
this.skip(end);
return this.advance();
}
// After modification
if ('/' == this.str[0] && '/' == this.str[1]) {
var end = this.str.indexOf('\n');
const str = this.str.substring(0, end)
if (-1 == end) end = this.str.length;
this.skip(end);
return new Token('comment', new nodes.Comment(str, suppress, true))
}
---------------------------------------
// download stylus-converter
npm install -g stylus-converter
// Run the cli conversion file
stylus-conver -i test.styl -o test.scss
// Run the cli conversion directory
// cd your project
mv src src-temp
stylus-conver -d yes -i src-temp -o src
二.轉(zhuǎn)成sass后，轉(zhuǎn)css
1.https://www.sassmeister.com/
注意有些語(yǔ)法不支持，需要手動(dòng)修改
三.rem轉(zhuǎn)px
注意修改 1rem等于多少px！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../layui/jquery-3.2.1.min.js"></script>
<style>
div#newCss {
border: 1px solid #999;
width: 504px;
height: 140px;
}
</style>
</head>
<body>
<h4>rem樣式</h4>
<textarea id="css" cols="60" rows="10"></textarea>
<br />
<input type="button" value="rem轉(zhuǎn)換rpx" onclick="rem2rpx()" />
<h4>轉(zhuǎn)換后的樣式</h4>
<div id="newCss"></div>
<input id="aaa">
<input id="bbb">
<script type="text/javascript">
function rem2rpx() {
var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}"
//對(duì)原樣式根據(jù)rem進(jìn)行拆分成數(shù)組，這樣除了最后一個(gè)元素，數(shù)組前邊的幾個(gè)元素都是以原rem樣式數(shù)值結(jié)尾
//拆分后的格式：[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]
var newCssArr = oldCss.split("rem")
var newCss = "" //轉(zhuǎn)換后新的樣式變量
for(var i in newCssArr) {
if(i < newCssArr.length - 1) {
//非最后一個(gè)元素，對(duì)字符串按照:再次拆分，把rem樣式的數(shù)值分離出來(lái)進(jìn)行轉(zhuǎn)換
var str = newCssArr[i]
var idx = str.lastIndexOf(':')
var prevStr = str.substring(0, idx + 1)
var nextStr = "" //nextStr格式為 -.3 , -3 , 3 , .3
if(str.indexOf('-.') > -1) {
//nextStr格式為-.3rem或-3rem
nextStr = str.substring(str.indexOf(':-') + 2, str.length)
//nextStr格式為.3rem或3rem
if(nextStr.indexOf('.') > -1) {
nextStr = "0" + nextStr
}
nextStr = "-" + parseInt(nextStr * 200) + "rpx"
} else {
nextStr = str.substring(idx + 1, str.length)
//處理 nextStr="1px .2"的情況
var index = nextStr.indexOf(' ')
if(index >= 0) {
let str1 = nextStr.substring(0, index)
let str2 = nextStr.substring(index + 1, nextStr.length)
str2 = str2.indexOf('.') > -1 ? "0" + str2 : str2
str2 = parseInt(str2 * 200) + "rpx"
nextStr = str1 + ' ' + str2
} else {
nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr
nextStr = parseInt(nextStr * 200) + "rpx"
}
}
//重組數(shù)組內(nèi)的樣式字符串
newCss += prevStr + "" + nextStr
} else {
//追加最后一個(gè)數(shù)組元素
newCss += newCssArr[i]
}
}
document.getElementById("newCss").innerHTML = newCss
}
$("#bbb").keydown(function(event) {
if(event.which == 13) {
console.log("ok")
}
});
</script>
</body>
</html>
