1. Install the easy sass extension in vscode
2. Import the easy sass extension installed by vscode in the WeChat developer tool
After installation is complete, the extension will be reloaded.
After opening it again, you can see that the extension already has easy sass.
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
Filter the input Easysass: Formats
to the exact settings and open the configuration file
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.
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.