<li id="g3zqm"></li>
2020-4-22 seo達人
微信小程序的wxss、阿里旗下淘寶、支付寶小程序的acss等等語法很類似原生css，但是在web開發里用慣了動態css語言，再寫回原生css很不習慣，尤其是父子樣式的嵌套寫法非常繁瑣。
因此，我希望能有一個自動化構建方案，能夠簡單地將scss轉換成小程序的樣式語言。
以前寫微信小程序的依賴庫時用過，使用gulp編譯，將源碼和編譯后的代碼分別放到src和dist兩個目錄。gulp會處理src下面的所有文件，將其中的scss轉換成css，并將其他所有文件原封不動挪到dist下相應位置。
這里就不詳細說了，代碼參考Wux。
非常簡單直接，使用Webstorm/IDEA的File Watchers功能實時轉換。
確保命令行輸入sass -v能出現版本號，安裝過程略。
File Watchers
到插件市場上搜索并安裝（已安裝則跳過）
現在安裝完插件打開項目會自動彈出scss轉css的向導，方便了很多。但還需要做一些修改，配置如下：
首先要將生成文件的后綴名改掉，比如這里我的淘寶小程序就得是acss。
其次，將Arguments改為:
$FileName$:$FileNameWithoutExtension$.acss --no-cache --sourcemap=none --default-encoding utf-8 --style expanded
如果不加--no-cache，scss文件同目錄下會出現一個.sass-cache目錄。
如果不加--sourcemap=none, scss文件同目錄下會出現一個.map文件。
如果不加--default-encoding utf-8, scss文件如果有中文注釋轉換就會報錯。
style可不加，這里用的是無縮進和壓縮的風格，反正小程序打包發布時還會壓，這里保持可讀性。
現在這個scss轉換是單獨作用于項目的，如果新建一個小程序項目，就需要重新添加（不建議設置成global，容易誤傷）。
注意到File Watchers列表的右側操作欄下方有導入導出按鈕，可以將現在配好的設置導出保存，將來新建項目時只要導入一下就行了。
之后還有一個問題，如果我手動將編譯后的css（即wxss或者acss，下略）文件刪除，scss文件不改動的話，就不會重新編譯出css文件。
或者萬一監聽失效或者不夠及時，css還有可能是舊的。
所以還需要一個命令，用來將整個目錄下的scss文件統一轉換，確保沒有遺漏和保持代碼。
不過我看了半天sass和sass-convert的文檔，沒有找到一個可用的寫法，能讓命令行遍歷指定目錄下的所有scss文件，將其轉換成css放到源文件所在目錄，并且將后綴名改為wxss或者acss。
所以遍歷這個行為只能交給nodejs來實現，代碼如下：
創建編譯腳本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規則，下劃線開頭的文件不會生成css } // exec可以讓nodejs執行外部命令 exec(`sass --no-cache --sourcemap=none --default-encoding utf-8 --style expanded ${file}:${newFileWithoutExt}.acss`, { cwd: path.dirname(file) // 不寫這個會導致生成的文件出現在根目錄 }, (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",
},