关于小程序:如何让原生小程序支持less语法最新教程

前言

大家写小程序的时候，预计 最不爽 的就是写 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 文件相干介绍，大家能够去官网文档具体看看