前言

大家写小程序的时候，预计最不爽的就是写wxss款式了吧。保护差，可读性差，如果Dom嵌套的多的话，预计写下去得疯。于是上网搜了一下怎么让原生小程序反对less写法，然而发现很多文章都很老了，微信本人的IDE曾经更新了n个版本了，文章的步骤外面曾经跟IDE里的不一样。于是本人摸索总结了一下，本文算是让原生小程序反对less语法的最新版本教程了。

补充：本文应用的是IDE是：原生小程序自带的IDE，vscode

下载Easy LESS插件

  • 在vscode市场外面下载less编译插件——Easy LESS。装置的时候倡议不要抉择同步，不然的话，这个插件会同步到你别的电脑里的vscode。因为当初咱们工程根本都用webpack等构建工具，能够间接编译less啥的，所以这个插件同步了没什么意义，下载它只是为了给原生小程序用。

    图示：

  • 比拟懒的同学，也能够间接在百度云下，提取码: 7777。这样的话，没有用vscode的同学，也能够间接下载插件装置。

开始配置（这里跟网上的教程不一样了）

1.装置插件

图示：

  • 抉择“导入已装置的vscode扩大”形式（不倡议）

    这个形式不太倡议。因为这种形式，会将你vscode外面装置过的插件，都装到原生小程序IDE外面。然而有很多插件，实际上在原生小程序IDE里是用不到也用不了的，比方：Live Server、Vetur、open in browser等。集体喜爱IDE里能不装的货色，相对不装。

  • 抉择“从已解包的扩大文件夹装置”形式（倡议）

    这个形式强烈建议。算是一种按需载入，须要什么就加什么，很合乎“编程思维”。
    如果是在vscode下面下载的，则找到vscode外面插件的门路：

    • windows门路：C:\Users\Administrator\.vscode\extensions
    • Mac门路：User/（你的用户名）/.vscode/extensions（关上Finder，转到Macintosh HD文件夹（从左栏中的设施拜访），按住Cmd + Shift + . 所有暗藏文件都将变为可见）

2.配置插件相干的配置信息
ctr + p，输出>setting.json，抉择关上首选项：关上设置（json），拉到最上面，退出配置：

"less.compile": {    "outExt": ".wxss"},

如果胜利配置的话，下面那几行代码是会高亮的，如果没有高亮，阐明没有配置胜利

验证

下面的步骤都实现了当前，重启一下IDE，输出新建一个less文件测试一下，如果ctr + s能够输入一个.wxss的文件，则阐明所有配置胜利了，以下为胜利示例：

PS：在所有步骤实现后，有时可能会呈现ctr + s 不能输入.wxss文件的状况，这时能够更新小程序自带的IDE试试。

完满Ending

其实实现以上步骤，根本就能够了。然而为了更完满一点，咱们还须要再加多一个疏忽上传文件的配置。
公布体验小程序的时候，大家都晓得包是有大小限度的，所以当咱们的页面越多，.less文件也会越多，这多多少少会减少咱们进入小程序时耗得工夫。所以咱们在公布预览小程序的时候，要疏忽掉.less文件的上传（测试如同理论不会上传.less，但为了保险起见，还是加上疏忽配置）。关上根目录的project.config.json文件，退出以下配置：

"packOptions": {    "ignore": [    {        "value": ".less",        "type": "suffix"    },},

对于project.config.json文件相干介绍，大家能够去官网文档具体看看