解决使用WebStorm 编写微信小程序时rpx前出现空格，小程序使用scss

先祝大家新年快乐 。 感谢医疗前线同志！！

响应号召蹲在家里，更新一篇webstorm使用技巧

在使用微信开发者工具写小程序的时候感觉很烦，因为常年使用webstorm所以这里记录一下配置webstorm的过程

• 解决webstorm 里 wxml，wxss的报错问题
• webstorm内的代码提示
• 微信小程序使用scss问题

以下的截图是本人计算机的，webstorm版本 2019.3

Wxapp Support

首先我是使用了Wxapp Support这个插件，这个是现在比较好用的一款插件，它可以在webstorm里进行小程序代码提示，并且映射代码格式化样式

插件

---

sass

使用sass预编译

• 微信的wxss 是和css基本一致的，但是对于一值使用css预编译的人来说很不方便，所以想在wxss里使用sass编译
• 使用sass会遇到问题：比如在.scss文件里进行代码格式化的时候，如果.scss里有rpx的话，rpx前面会被格式化出一个空格导致文件报错，
  而且我的tab补全功能预设是补全px，所以我使用了webstorm 的File Watchers自动进行更改wxss，把px转化成rpx
• 可以在.scss文件里正常书写px

---

首先配置File Watchers的scssWatchers

Watchers scss

这里贴出这两项配置，可以使scss编译后在当前文件夹自动生成wxss文件，这个wxss文件的单位还是px的

'Arguments': $FileName$:$FileNameWithoutExtension$.wxss --no-cache  --sourcemap=none  --style expanded
 'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

---

下面配置File Watchers的px转化为rpx的Watchers

scss px to rpx

配置这一项使用正则替换成rpx

'Arguments':   -i  ""  s/\([1234567890]\)px/\1rpx/g  $FilePath$

---

目录结构就变成了下图这样，多写一个.scss文件，然后wxss由sass服务生成

目录结构

---

这样就可以开始写微信小程序了。

比使用微信开发者工具的效率提高了很多。