本文主要介绍了如何将微信小程序less文件编译成微信小程序wxss文件的相关信息，下面是具体的实现方法，有需要的朋友可以参考下面

less文件编译进微信小程序wxss文件

2016年9月21日，微信小程序正式开启内测。在微信生态中，触手可及、随手可用的微信小程序受到了广泛关注，成为微信朋友圈的热门话题。在这种火爆的氛围中，作为一名前端开发人员的我也悄悄尝试了一下。

在做小demo的时候，发现一个极其困难的事情：**如何将less/sass文件转换成小程序使用的wxss文件**。

对于我这种基本不使用原生CSS，习惯写得少的人来说，这使得样式编写相当困难。

经过尝试（一个可以编译less/sass的工具）和查阅各种资料，终于找到了一个可行的方法，下面以less为例分享给大家，sass同样可行。

环境要求：

-

-

具体步骤

1.使用命令安装less。

在命令窗口输入：npm less -g，然后回车进行安装。如下图：

2.配置

1). 打开设置，文件—> 。

2).展开左侧列表最后一项，找到File，我们可以看到右侧有一个白色的框，然后点击添加图标，选择less，如图：

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

4).保存并确认。

3. 验证

1).我们在编辑器里验证一下是否起作用了，添加一个less文件，我们会发现编辑器自动给我添加了一个对应的wxss文件。

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

等等！我们的 wxss 看起来很糟糕！

不要惊慌，有一个解决方案：

1).打开设置，找到File anb Code。如图：

2).点击添加图标，在扩展名输入框中输入wxss，点击。

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

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

这里我只是用less来举例，sass也是类似的，有需要的可以自己制作。