小程序如何使用 scss 编写 css 输出 wxss， phpStorm webStorm

刚开始写小程序，发现一个很严重的问题，我之前一直以为 wxss 是个多么nb的东西，以为跟 scss 一样的，这才知道原来 wxss 只是 css 的一个变名，没有 emmit 语法。

先决条件：

你已经使用过 scss 或者 sass 或者 less
如果没有使用过，请先学习一下再来看这个，可以去看我之前写的教程：（推荐使用 scss）

SCSS 日常用法: https://blog.****.net/KimBing/article/details/89738636
LESS 日常用法: https://blog.****.net/KimBing/article/details/87879224

什么是 Emmit

Emmit 语法，是针对 css 的一个缩写属性的语法

来看一下 emmit 语法的魅力：

配置 fileWatcher 添加 scss 转 wxss 支持

其实说起来也没有特别复杂，scss 在输出为 css 的时候，可以自定义文件的位置和文件后缀名即可。

1. 将项目从 phpStorm 中打开 （ webStorm 同理， IDEA 所有的产品都是一样的配置）

2. 打开【设置】搜索【File Watcher】定位到 File Watcher 标签，点击 + 加号，添加 scss

3. 配置 Arguments 一栏，把后面的 css 改为 wxss， 并在其后面添加 --no-source-map

–no-source-map 的意思是不输出 .map 文件， sass 在编译的时候是默认输出 .map 文件的。因为我们输出的是 wxss 文件，开发工具并不能识别 .map 定位 scss 所以就去掉了

这是 sass 指令的说明文档，并于 .map 输出的说明

此时文件目录就会这样的：

form.scss 是源文件，生成 form.wxss 文件

左侧为源文件，右侧为输出的 wxss 文件

4. 可以进行文件分离，分离配置文件

此时我们就可以在项目中添加需要的 scss 文件了，在编辑完后就会自动输出为 wxss。

效果

之前没样式的时候：

添加样式后：

结语

这样，我们就完成了对小程序的 scss 支持，虽然是变相的支持，但已经很方便了。