微信小程式的wxss、阿里旗下淘寶、支付寶小程式的acss等等語法很類似原生css，但是在web開發裡用慣了動態css語言，再寫回原生css很不習慣，尤其是父子樣式的巢狀寫法非常繁瑣。
因此，我希望能有一個自動化建置方案，能夠簡單地將scss轉換成小程式的樣式語言。
方案1
以前寫微信小程式的依賴函式庫時用過，使用gulp編譯，將原始碼和編譯後的程式碼分別放到src和dist兩個目錄。 gulp會處理src下面的所有文件，將其中的scss轉換成css，並將其他所有文件原封不動挪到dist下對應位置。
這裡就不詳細說了，程式碼參考Wux。
方案2
非常簡單直接，使用Webstorm/IDEA的File Watchers功能即時轉換。
安裝Ruby和sass
確保命令列輸入sass -v能出現版本號，安裝過程略。
安裝File Watchers
到外掛程式市場上搜尋並安裝（已安裝則跳過）
新增scss的轉換腳本
現在安裝完外掛程式開啟專案會自動彈出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",
}推荐教程：《微信小程序》
以上是使用scss開發微信小程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
