微信小程序 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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
js编写三级联动简单案例
Dec 21 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
微信小程序 获取当前地理位置和经纬度实例代码
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/03/09 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python中zip()函数用法实例教程
2014/07/31 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python读取LMDB中图像的方法
2018/07/02 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
文明生主要事迹
2014/05/25 职场文书
2014年政教处工作总结
2014/12/20 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang