乐趣区

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

前言

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

补充:本文应用的是 IDE 是:原生小程序自带的IDEvscode

下载 Easy LESS 插件

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

    图示:

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

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

1. 装置插件

图示:

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

    这个形式不太倡议。因为这种形式,会将你 vscode 外面 装置过的 插件,都装到原生小程序 IDE 外面。然而有很多插件,实际上在原生小程序 IDE 里是用不到也用不了的,比方:Live ServerVeturopen 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 文件相干介绍,大家能够去官网文档具体看看

退出移动版