【Vite】项目中scss 保存后 文件编译成了wxss，已解决

前言

最近学习使用vite,在vite中使用sass 的时候每次保存都把scss文件编译成wxss文件。众所周知，wxss文件是微信小程序的样式。当时就懵了，查了很多资料终于解决了。主要还是Easy sass 插件的原因，参考其他博主的文章（全部照搬过来了），修改设置就解决了。主要是修改extension为.css(最后一张图片)，其他不必要流程可以省略。

参考文章：微信小程序使用 scss

一、在 vscode 中安装 easy sass 扩展

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

再次打开后就可以看到扩展已经有 easy sass 了

在这里插入图片描述

三、修改 easy sass 配置

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

首先打开扩展设置

在这里插入图片描述

输入Easysass: Formats筛选到准确设置，并打开配置文件

在这里插入图片描述

可以看到这里默认有两个配置，一个是扩展视图的.css，一个是压缩视图的.min.css

在这里插入图片描述

修改一下即可，使用 scss 基本就用不到修改 wxss 了，所以我这里使用压缩视图，然后把后缀改为.wxss 即可

在这里插入图片描述

下班~