這篇文章主要介紹使用scss開發(fā)小程序的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、環(huán)縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

微信小程序的wxss、阿里旗下淘寶、支付寶小程序的acss等等語(yǔ)法很類似原生css，但是在web開發(fā)里用慣了動(dòng)態(tài)css語(yǔ)言，再寫回原生css很不習(xí)慣，尤其是父子樣式的嵌套寫法非常繁瑣。

因此，我希望能有一個(gè)自動(dòng)化構(gòu)建方案，能夠簡(jiǎn)單地將scss轉(zhuǎn)換成小程序的樣式語(yǔ)言。

方案1

以前寫微信小程序的依賴庫(kù)時(shí)用過，使用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)，安裝過程略。

安裝File Watchers

到插件市場(chǎng)上搜索并安裝（已安裝則跳過）

添加scss的轉(zhuǎn)換腳本

現(xiàn)在安裝完插件打開項(xiàng)目會(huì)自動(dòng)彈出scss轉(zhuǎn)css的向?qū)?，方便了很多。但還需要做一些修改，配置如下：

首先要將生成文件的后綴名改掉，比如這里我的淘寶小程序就得是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è)問題，如果我手動(dòng)將編譯后的css（即wxss或者acss，下略）文件刪除，scss文件不改動(dòng)的話，就不會(huì)重新編譯出css文件。
或者萬(wàn)一監(jiān)聽失效或者不夠及時(shí)，css還有可能是舊的。
所以還需要一個(gè)命令，用來(lái)將整個(gè)目錄下的scss文件統(tǒng)一轉(zhuǎn)換，確保沒有遺漏和保持代碼最新。

不過我看了半天sass和sass-convert的文檔，沒有找到一個(gè)可用的寫法，能讓命令行遍歷指定目錄下的所有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ī)則，下劃線開頭的文件不會(huì)生成css
    }    // exec可以讓nodejs執(zhí)行外部命令
    exec(`sass --no-cache --sourcemap=none --default-encoding utf-8 --style expanded ${file}:${newFileWithoutExt}.acss`, {      cwd: path.dirname(file) // 不寫這個(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開發(fā)小程序的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：使用scss開發(fā)小程序的方法
文章分享：http://aaarwkj.com/article24/pccjce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、虛擬主機(jī)、網(wǎng)站收錄、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)