微信小程序 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 相关文章推荐
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jQuery的position()方法详解
Jul 19 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 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
dedecms中使用php语句指南
2014/11/13 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python中requests模块的使用方法
2015/04/08 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python归并排序算法过程实例讲解
2020/11/04 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
金融专业个人的自我评价
2013/10/18 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
阳光体育活动方案
2014/02/16 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
财务负责人岗位职责
2015/02/03 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL