微信小程序的wxss、阿里旗下淘寶、支付寶小程序的acss等等語(yǔ)法很類似原生css，但是在web開(kāi)發(fā)里用慣了動(dòng)態(tài)css語(yǔ)言，再寫(xiě)回原生css很不習(xí)慣，尤其是父子樣式的嵌套寫(xiě)法非常繁瑣。
因此，我希望能有一個(gè)自動(dòng)化構(gòu)建方案，能夠簡(jiǎn)單地將scss轉(zhuǎn)換成小程序的樣式語(yǔ)言。
方案1以前寫(xiě)微信小程序的依賴庫(kù)時(shí)用過(guò)，使用gulp編譯，將源碼和編譯后的代碼分別放到src和dist兩個(gè)目錄。
gulp會(huì)處理src下面的所有文件，將其中的scss轉(zhuǎn)換成css，并將其他所有文件原封不動(dòng)挪到dist下相應(yīng)位置。
這里就不詳細(xì)說(shuō)了，代碼參考Wux。
方案2非常簡(jiǎn)單直接，使用Webstorm/IDEA的File Watchers功能實(shí)時(shí)轉(zhuǎn)換。
安裝Ruby和sass確保命令行輸入sass -v能出現(xiàn)版本號(hào)，安裝過(guò)程略。
安裝File Watchers到插件市場(chǎng)上搜索并安裝（已安裝則跳過(guò)）添加scss的轉(zhuǎn)換腳本現(xiàn)在安裝完插件打開(kāi)項(xiàng)目會(huì)自動(dòng)彈出scss轉(zhuǎn)css的向?qū)В奖懔撕芏唷?br>但還需要做一些修改，配置如下：
首先要將生成文件的后綴名改掉，比如這里我的淘寶小程序就得是acss。
其次，將Arguments改為:$FileName$:$FileNameWithoutExtension$.acss --no-cache --sourcemap=none --default-encoding utf-8 --style expanded如果不加--no-cache，scss文件同目錄下會(huì)出現(xiàn)一個(gè).sass-cache目錄。
如果不加--sourcemap=none, scss文件同目錄下會(huì)出現(xiàn)一個(gè).map文件。
如果不加--default-encoding utf-8, scss文件如果有中文注釋轉(zhuǎn)換就會(huì)報(bào)錯(cuò)。
style可不加，這里用的是無(wú)縮進(jìn)和壓縮的風(fēng)格，反正小程序打包發(fā)布時(shí)還會(huì)壓，這里保持可讀性。
現(xiàn)在這個(gè)scss轉(zhuǎn)換是單獨(dú)作用于項(xiàng)目的，如果新建一個(gè)小程序項(xiàng)目，就需要重新添加（不建議設(shè)置成global，容易誤傷）。
注意到File Watchers列表的右側(cè)操作欄下方有導(dǎo)入導(dǎo)出按鈕，可以將現(xiàn)在配好的設(shè)置導(dǎo)出保存，將來(lái)新建項(xiàng)目時(shí)只要導(dǎo)入一下就行了。
之后還有一個(gè)問(wèn)題，如果我手動(dòng)將編譯后的css（即wxss或者acss，下略）文件刪除，scss文件不改動(dòng)的話，就不會(huì)重新編譯出css文件。
或者萬(wàn)一監(jiān)聽(tīng)失效或者不夠及時(shí)，css還有可能是舊的。
所以還需要一個(gè)命令，用來(lái)將整個(gè)目錄下的scss文件統(tǒng)一轉(zhuǎn)換，確保沒(méi)有遺漏和保持代碼最新。
不過(guò)我看了半天sass和sass-convert的文檔，沒(méi)有找到一個(gè)可用的寫(xiě)法，能讓命令行遍歷指定目錄下的所有scss文件，將其轉(zhuǎn)換成css放到源文件所在目錄，并且將后綴名改為wxss或者acss。
所以遍歷這個(gè)行為只能交給nodejs來(lái)實(shí)現(xiàn)，代碼如下：
創(chuàng)建編譯腳本build/scss-convert.js：
var path = require("path")var fs = require("fs")const {
exec }
= require('
child_process'
)const basePath = path.resolve(__dirname, '
../'
)function mapDir(dir, callback, finish) {
fs.readdir(dir, function(err, files) {
if (err) {
console.error(err) return }
files.forEach((filename, index) => {
let pathname = path.join(dir, filename) fs.stat(pathname, (err, stats) => {
// 讀取文件信息 if (err) {
console.log('
獲取文件stats失敗'
) return }
if (stats.isDirectory()) {
mapDir(pathname, callback, finish) }
else if (stats.isFile()) {
if (!['
.scss'
].includes(path.extname(pathname))) {
return }
callback(pathname) }
}
) if (index === files.length - 1) {
finish && finish() }
}
) }
) }
mapDir( basePath, function (file) {
const newFileWithoutExt = path.basename(file, '
.scss'
) if (newFileWithoutExt.startsWith('
_'
)) {
return // 按照scss規(guī)則，下劃線開(kāi)頭的文件不會(huì)生成css }
// exec可以讓nodejs執(zhí)行外部命令 exec(`sass --no-cache --sourcemap=none --default-encoding utf-8 --style expanded ${
file}
:${
newFileWithoutExt}
.acss`, {
cwd: path.dirname(file) // 不寫(xiě)這個(gè)會(huì)導(dǎo)致生成的文件出現(xiàn)在根目錄 }
, (err, stdout, stderr) => {
if (err) {
console.log(err) return }
console.log(`stdout: ${
stdout}
`) }
) }
, function() {
// console.log('
xxx文件目錄遍歷完了'
) }
)在package.json里添加一條script:"scripts": {
"scss": "node build/scss-convert", }
推薦教程：
《微信小程序》以上就是使用scss開(kāi)發(fā)微信小程序的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
scss 微信小程序本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
小程序怎么發(fā)布？
下一篇：
如何推廣小程序業(yè)務(wù)？相關(guān)文章相關(guān)視頻微信小程序如何開(kāi)發(fā)一款小游戲？（實(shí)戰(zhàn)教程）微信小程序怎么實(shí)現(xiàn)九宮格跳轉(zhuǎn)微信小程序亮度怎么調(diào)？微信小程序框架目前比較火的是？使用scss開(kāi)發(fā)微信小程序小程序的rpx長(zhǎng)度單位詳解布局奔牛課堂小程序搜素框小程序文檔 [溫州做小程序]