DDR爱好者之家

微信小程序 less文件编译成wxss文件实现办法
站长资源 2024/11/28 佚名
36 1538
DDR爱好者之家 Design By 杰米

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大同小异，大家如果有需要，可以自己弄一下。

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米