微信小程序 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 相关文章推荐
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
Node.js的特点详解
Feb 03 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
数字转英文
2006/12/06 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php表单处理操作
2017/11/16 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Python正则捕获操作示例
2017/08/19 Python
python清理子进程机制剖析
2017/11/23 Python
树莓派实现移动拍照
2019/06/22 Python
Python如何用filter函数筛选数据
2020/03/05 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
大学生社会实践评语
2014/04/25 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL