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

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,然后回车安装。如下图：

2.webstrom 配置

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

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

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

4).保存确认。

3.验证

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

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

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

大家不慌，有解决办法：

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

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

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

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

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

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

赞 (0)

相关推荐

  • 微信小程序 框架详解及实例应用

    微信小程序 框架详解及实例应用

    快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是

  • 微信小程序 for 循环详解

    微信小程序 for 循环详解

    1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

  • 微信小程序 （三）tabBar底部导航详细介绍

    微信小程序 （三）tabBar底部导航详细介绍

    tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp                     icon组件 Window                            text组件        

  • 微信小程序（应用号）简单实例应用及实例详解

    微信小程序（应用号）简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 微信小程序 实战小程序实例

    微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序 参数传递详解

    微信小程序 参数传递详解

    微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

  • 微信小程序 (十七)input 组件详细介绍

    微信小程序 (十七)input 组件详细介绍

    input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

  • 微信小程序 wx.request(OBJECT)发起请求详解

    微信应用号小程序发起请求wx.request(OBJECT) wx.request(OBJECT) ? wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的header , header中不能设置Referer method String 否 默认为GET,有效值:OPTIONS,GET,H

随机推荐