使用scss開發小程序（各類小程序平臺通用）

微信小程序的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",
  },
複製代碼