使用scss开发小程序的方法

这篇文章主要介绍使用scss开发小程序的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

微信小程序的wxs,阿里旗下淘宝,支付宝小程序的acss等等语法很类似原生css,但是在网络开发里用惯了动态css语言,再写回原生css很不习惯,尤其是父子样式的嵌套写法非常繁琐。

因此,我希望能有一个自动化构建方案,能够简单地将scss转换成小程序的样式语言。

方案1

以前写微信小程序的依赖库时用过,使用吞咽编译,将源码和编译后的代码分别放到src和dist两个目录.gulp会处理src下面的所有文件,将其中的scss转换成css,并将其他所有文件原封不动挪到dist下相应位置。

这里就不详细说了,代码参考Wux。

方案2

非常简单直接,使用<代码> Webstorm/想法>

安装Ruby和sass

确保命令行输入sass - v能出现版本号,安装过程略。

安装文件观察家

到插件市场上搜索并安装(已安装则跳过)

添加scss的转换脚本

现在安装完插件打开项目会自动弹出scss转css的向导,方便了很多。但还需要做一些修改,配置如下:

首先要将生成文件的后缀名改掉,比如这里我的淘宝小程序就得是acss。

其次,将参数改为:

文件名:美元FileNameWithoutExtension .acss 美元——no-cache ——sourcemap=none ——default-encoding  utf-8 ——style 扩大

如果不加,no - cache scss文件同目录下会出现一个。sass-cache目录。

如果不加——sourcemap=none, scss文件同目录下会出现一个。地图文件。

如果不加默认编码utf - 8, scss文件如果有中文注释转换就会报错。

风格可不加,这里用的是无缩进和压缩的风格,反正小程序打包发布时还会压,这里保持可读性。

现在这个scss转换是单独作用于项目的,如果新建一个小程序项目,就需要重新添加(不建议设置成全球、容易误伤)。

注意到文件观察家列表的右侧操作栏下方有导入导出按钮,可以将现在配好的设置导出保存,将来新建项目时只要导入一下就行了。

<人力资源/>

之后还有一个问题,如果我手动将编译后的css(即wxs或者acss,下略)文件删除,scss文件不改动的话,就不会重新编译出css文件。
或者万一监听失效或者不够及时,css还有可能是旧的。
所以还需要一个命令,用来将整个目录下的scss文件统一转换,确保没有遗漏和保持代码最新。

不过我看了半天sass和sass-convert的文档,没有找到一个可用的写法,能让命令行遍历指定目录下的所有scss文件,将其转换成css放到源文件所在目录,并且将后缀名改为wxs或者acss。

所以遍历这个行为只能交给nodejs来实现,代码如下:

创建编译脚本构建/scss-convert。js:

var  path =,要求(“path") var  fs =,要求(“fs") const  {, exec },=,要求(& # 39;child_process& # 39;) const  basePath =, path.resolve (__dirname, & # 39; . ./& # 39;) function  mapDir (dir,,回调,,完成),{ 　　fs.readdir才能(dir,函数(呃,,文件),{,,,if  (err), {,,,,, console.error (err),,,,,,回来 　　,,,} 　　,,,files.forEach((文件名,指数),=祝辞,{,,,,,let  pathname =, path.join (dir,文件名) 　　,,,,,fs.stat(路径名,(呃,,统计数据),=祝辞,{,//读取文件信息 　　,,,,,,,if  (err), {,,,,,,,,, console.log(& # 39;获取文件统计失败& # 39;),,,,,,,,,,回来 　　,,,,,,,},,,,,,,,if  (stats.isDirectory ()), { 　　,,,,,,,,,mapDir(路径名,,回调,,完成) 　　,,,,,,,},else  if  (stats.isFile ()), {,,,,,,,,, if  (! [& # 39; .scss& # 39;]其中(path.extname(路径))),{,,,,,,,,,,,回来 　　,,,,,,,,,} 　　,,,,,,,,,回调(路径) 　　,,,,,,,} 　　,,,,,}),,,,,,if  (index ===, files.length 作用;1),{ 　　,,,,,,,finish ,,,完成() 　　,,,,,} 　　,,,}) 　　})才能 　　} 　　 　　mapDir ( 　　basePath才能,,,function (文件),{,,,const  newFileWithoutExt =, path.basename(文件,,& # 39;.scss& # 39;),,,, if  (newFileWithoutExt.startsWith (& # 39; _ # 39;)), {,,,,, return ,//,按照scss规则,下划线开头的文件不会生成css 　　,,,},,,,//,exec可以让nodejs执行外部命令 　　,,,exec (“sass ——no-cache ——sourcemap=none ——default-encoding  utf-8 ——style  expanded  $ {file}: $ {newFileWithoutExt} .acss ',,{,,,,,:慢性消耗性疾病,path.dirname(文件),//,不写这个会导致生成的文件出现在根目录 　　,,,},,(stdout,呃,,stderr),=祝辞,{,,,,,if  (err), {,,,,,,, console.log (err),,,,,,,,回来 　　,,,,,},,,,,,console.log (stdout: $ {stdout}”) 　　,,,}) 　　null 　　null 　　null 　　null

使用scss开发小程序的方法