使用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",
  },