中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用scss開發小程序的方法

發布時間:2021-01-06 10:07:33 來源:億速云 閱讀:167 作者:小新 欄目:移動開發

這篇文章主要介紹使用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的轉換腳本

現在安裝完插件打開項目會自動彈出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開發小程序的方法”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

灵璧县| 巫溪县| 鸡泽县| 玉门市| 泾川县| 汶上县| 常山县| 区。| 清涧县| 延津县| 屏南县| 贡山| 兴山县| 台湾省| 平湖市| 叙永县| 辽源市| 化州市| 黎平县| 嘉祥县| 绵竹市| 曲沃县| 古丈县| 靖远县| 平度市| 东山县| 潜江市| 应用必备| 德化县| 丰台区| 宣武区| 武汉市| 通海县| 济源市| 莱芜市| 平原县| 宣化县| 宜兰县| 保山市| 南靖县| 叶城县|