⼩程序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⼤同⼩异，⼤家如果有需要，可以⾃⼰弄⼀下。感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。