⼩程序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).保存确认。小程序图文editor
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⼤同⼩异,⼤家如果有需要,可以⾃⼰弄⼀下。感谢阅读,希望能帮助到⼤家,谢谢⼤家对本站的⽀持!