微信小程序使用 scss

一、在 vscode 中安装 easy sass 扩展

微信小程序使用 scss_第1张图片

二、在微信开发者工具导入 vscode 安装的 easy sass 扩展

微信小程序使用 scss_第2张图片

微信小程序使用 scss_第3张图片

安装完成后会让重新加载扩展

再次打开后就可以看到扩展已经有 easy sass 了
微信小程序使用 scss_第4张图片

三、修改 easy sass 配置

重新加载扩展后,默认情况下这个扩展是已经启动的,但是这个扩展默认是将 scss 转为 css 和 min.css 而不是 wxss,所以需要做一些修改

首先打开扩展设置
微信小程序使用 scss_第5张图片

输入Easysass: Formats筛选到准确设置,并打开配置文件
微信小程序使用 scss_第6张图片

可以看到这里默认有两个配置,一个是扩展视图的.css,一个是压缩视图的.min.css
微信小程序使用 scss_第7张图片

修改一下即可,使用 scss 基本就用不到修改 wxss 了,所以我这里使用压缩视图,然后把后缀改为.wxss 即可
微信小程序使用 scss_第8张图片

你可能感兴趣的:(#,小程序,微信小程序,scss,小程序)