How to use less in WeChat applet (optimal method)

Preface

I am used to writing less/sass, but now I am still lacking css when developing small programs, which I am not used to.

The tutorials I searched online were either about gulp or the Easy-less plug-in for vscode.

Traditional method

Let's compare the advantages and disadvantages of these two methods.

Gulp

The former requires a basic understanding of gulp, but for the now popular webpack, fewer and fewer people use gulp, and it has a certain learning cost, but fortunately it has a high degree of customization and you can add take at will.

Esay-less plugin by VScodd

Without saying anything, it's pretty good. Just install the easy-less plugin in vscode, then seting.json, and you can use less happily. Save it and you can generate a .wxss file in the same directory. The disadvantage is that it must be used in vscode, which means you have to open two editors during development, one to write less in vscode, and the other to use WeChat developer tools to preview... emmmmm, the picture is too beautiful to imagine

A new approach

By chance, I saw a screenshot on the Internet in Do you want to use less in your mini program? (VScode version)

Easy-less, which can be used directly in WeChat Developer Tools, has the same functions as those used in vscode. I was so amazed that I went to the official documentation to find out that WeChat Developer Tools started to support extension tools as early as version 1.03.2004271.

And you can just use the extension of vscode, which is very convenient

After a series of operations, it is proved that it is possible.

step

1. Install Easy-less in Vscode

2. Extended folder

The unpacked folder can be found in ~/.vscode/extensions (macOS system) or C:\Users\username.vscode\extensions (Microsoft Windows system)

Copy the mrcrowl.easy-less-1.6.3 file to the WeChat developer tool

3. Paste the extension folder

Open WeChat Developer Tools, top bar, Settings > Extension Settings > Extensions > Custom Extensions

Click, "Open extension folder", and then a folder will open, just paste it here.

4. Set output.wxss

There is only one last step left. Because Easy-less outputs CSS by default, but the applet needs to use .wxss files, so just set the output file suffix.

5. Restart WeChat Developer Tools

After the setting is successful, close the applet and reopen it, then find a page in the pages directory and create a new index.less, write some CSS and save it to see if there is any change in index.wxss...

Final result

refer to:

• Official Documentation - Editor Extensions
• vscode-easy-less
• Do you want to use less in your mini program? (VScode version)
• Less Chinese website

Summarize

This is the end of this article on how to use less in WeChat mini-programs (the best way). For more information about using less in WeChat mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!