微信小程序 less文件编译成wxss文件实现办法


Posted in Javascript onDecember 05, 2016

less文件编译成微信小程序wxss文件

2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注,刷爆朋友圈子。在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜。

在做demo小示例的过程中,我发现了一个极为让人为难的事儿:**如何让 less/sass 文件转成小程序的 wxss 文件**。</font>

对于基本不使用原生css,而习惯编写less的我,这个事儿让我的样式编写相当的吃力。

在尝试配置koala (一个可以编译less/sass的工具)以及搜索各种资料后,终于找到了一个可行的方法。我以less为示例,和大家分享下。sass也是可行的。

环境要求:

- webstrom
- nodejs

具体步骤

1.使用 nodejs 命令安装 less。

在 nodejs命令窗口输入:npm install less -g,然后回车安装。如下图:

微信小程序 less文件编译成wxss文件实现办法

2.webstrom 配置

1).打开webstrom的设置,File —> Settings。

2).展开左边列表最后一项,找到File Watchers。我们可以看到右侧的白色方框,再点击添加图标,选择less。如图所示:

微信小程序 less文件编译成wxss文件实现办法

3).在打开的的方框中,我们可以看到一些相关的配置。其他的我们不用管,我们只要关注两个地方:程序的路径和输出路径。 程序路径是我前面安装的 less路径,输出路径这个地方修改一下,将原来默认的.css改成.wxss。如下图:

微信小程序 less文件编译成wxss文件实现办法

4).保存确认。

3.验证

1).我们在编辑器中验证下是否生效。添加一个less文件,我们会发现编辑器自动给我添加了一个相应的wxss文件。

2).编写less文件,然后保存,再打开wxss文件,发现编译成功,那我们大功告成了。

微信小程序 less文件编译成wxss文件实现办法

微信小程序 less文件编译成wxss文件实现办法

等会!我们的 wxss 看起来效果很差!

大家不慌,有解决办法:

1).打开webstrom的 设置,找到Editor下的File anb Code Templates. 如图:

微信小程序 less文件编译成wxss文件实现办法

2).点击添加图标,在拓展名输入框输入wxss,点击Apply.

微信小程序 less文件编译成wxss文件实现办法

3).在弹出的文件类型框中,选择css。

微信小程序 less文件编译成wxss文件实现办法

4).打开我们的wxss,发现它和css是一样的。

微信小程序 less文件编译成wxss文件实现办法

这里我只是用less作为示例,sass大同小异,大家如果有需要,可以自己弄一下。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 #Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 #Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 #Javascript
解析Javascript单例模式概念与实例
Dec 05 #Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 #Javascript
深入理解jQuery()方法的构建原理
Dec 05 #Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 #Javascript
You might like
PHP 采集心得技巧
2009/05/15 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
vue v-model的用法解析
2020/10/19 Javascript
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
机械个人求职信范文
2014/01/24 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
校园安全广播稿范文
2014/09/25 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
企业年检委托书范本
2014/10/14 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
介绍信范文
2015/01/31 职场文书
教师个人发展总结
2015/02/11 职场文书
工资证明范本
2015/06/12 职场文书
校园运动会广播稿
2015/08/19 职场文书