WeChat applet uses scss

1. Install the easy sass extension in vscode

Insert image description here

2. Import the easy sass extension installed by vscode in the WeChat developer tool

Insert image description here

Insert image description here

After installation is complete, the extension will be reloaded.

After opening it again, you can see that the extension already has easy sass.
Insert image description here

3. Modify easy sass configuration

After reloading the extension, the extension is enabled by default, but by default this extension converts scss to css and min.css instead of wxss, so some modifications are required.

First open the extension settings
Insert image description here

Filter the input Easysass: Formatsto the exact settings and open the configuration file
Insert image description here

You can see that there are two configurations by default, one is the .css of the expanded view, and the other is the .min.css of the compressed view.
Insert image description here

Just modify it. When using scss, you basically don’t need to modify wxss, so I use the compressed view here, and then change the suffix to .wxss.
Insert image description here

Guess you like

Origin blog.csdn.net/sywdebug/article/details/132764358