微信小程序wxss、阿里淘宝、支付宝小程序acss等，语法和原生CSS很像，不过我习惯动态CSS语言在web开发，不习惯写回原来的css，尤其是嵌套的父子样式很繁琐。因此，我希望有一个自动化构建方案，可以简单地将scss转换成小程序的样式语言。之前在写微信小程序的依赖库时使用了方案一，使用gulp编译，将源码和编译后的代码分别放到src和dist目录下。Gulp会处理src下的所有文件，将scss转成css，将其他所有文件移动到dist下对应的位置。这里就不细说了，代码参考Wux。方案2非常简单直接，利用Webstorm/IDEA的FileWatchers功能实时转换。安装Ruby和sass，确保在命令行输入sass-v可以显示版本号。安装过程从略。安装FileWatchers，在插件市场搜索安装（如果安装，跳过）添加scss转换脚本现在安装插件打开项目后，会自动弹出scss-to-css向导，其中方便多了。但是还是需要做一些修改，配置如下：首先，生成文件的后缀要改一下，比如我这里的淘宝小程序必须是acss。其次，将参数更改为：$FileName$:$FileNameWithoutExtension$.acss--no-cache--sourcemap=none--default-encodingutf-8--styleexpanded如果不添加--no-cache，scss文件同目录下会出现一个.sass-cache目录。如果不加--sourcemap=none，一个.map文件会出现在和scss文件相同的目录下。如果不加--default-encodingutf-8，如果scss文件有中文注释转换，会报错。样式没加，这里是不缩进压缩的样式，反正小程序打包发布的时候会压缩，所以这里保持可读性。现在这个scss转换单独应用于项目。如果新建一个小程序项目，需要重新添加（不建议设置为全局，容易误伤）。注意在FileWatchers列表右侧的操作栏下方有一个导入导出按钮。您可以导出并保存您现在配置的设置。以后新建项目的时候只需要导入即可。那么还有一个问题，如果我手动删除编译好的css（也就是wxss或者acss，下面简称）文件，如果scss文件没有变化，css文件就不会重新编译。或者万一监控失败或不够及时，css可能是旧的。所以需要一个命令，统一转换整个目录下的scss文件，保证没有遗漏，保持代码最新。但是看了半天sass和sass-convert的文档，也没找到一个好用的写法，就是让命令行遍历指定目录下的所有scss文件，转成css放到在源文件所在目录，将后缀名改为Itiswxssoracss。所以遍历的行为只能由nodejs实现，代码如下：创建编译脚本build/scss-convert.js:varpath=require("path")varfs=require("fs")const{exec}=require('child_process')constbasePath=path.resolve(__dirname,'../')functionmapDir(dir,callback,finish){fs.readdir(dir,function(err,files){if(err){console.error(err)return}files.forEach((filename,index)=>{letpathname=path.join(dir,filename)fs.stat(pathname,(err,stats)=>{//读取文件信息if(err){console.log('Failedtogetfilestats')return}if(stats.isDirectory()){mapDir(pathname,callback,finish)}elseif(stats.isFile()){if(!['.scss'].includes(path.extname(pathname))){return}callback(pathname)}})if(index===files.length-1){finish&&finish()}})})}mapDir(basePath,function(file){constnewFileWithoutExt=path.basename(file,'.scss')if(newFileWithoutExt.startsWith('_')){return//根据scss规则，下划线开头的文件不会生成css}//exec允许nodejs执行外部命令exec(`sass--no-cache--sourcemap=none--default-encodingutf-8--styleexpanded${file}:${newFileWithoutExt}.acss`,{cwd:path.dirname(file)//不要writethiswill导致生成的文件出现在根目录},(err,stdout,stderr)=>{if(err){console.log(err)return}console.log(`stdout:${stdout}`)})},function(){//console.log('xxx文件目录遍历完成')})在package.json中添加脚本："scripts":{"scss":"nodebuild/scss-convert",},
