微信小程序开发小技巧：使用 scss 写样式

4.1 Webstorm 配置方法

关于蹩脚的 .wxss 样式，我使用 webstorm 的 file watcher 工具把 scss 文件监听改动并实时编译成 .wxss 文件，感觉比较好用，这里给大家分享一下我的配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

然后记得在 .gitignore 文件中加入要忽略的样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

*.scss
*.wxss.map

这样在上传到 git 的时候，就不会上传 scss 文件了～ 当然如果你的团队成员需要 scss 的话，还是建议 git 上传的时候也加上 scss 文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

这样设置之后，一个组件在本地的会是下面这样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

其中我们需要关注的就是 .js、.json、.scss、.wxml 文件，另外的文件 .wxss 会在你改动 .scss 文件之后自动生成并更新，而 .wxss.map 是插件自动生成的映射关系，不用管。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

如果不是使用 webstorm，可以直接执行命令 sass --watch index.scss:index.wxss -s expanded，命令行如果关闭，sass 命令就不会监听文件的变动然后编译，所以最好用编辑器的插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

同理，也可以使用 less、stylus 等预编译语言。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

4.2 Visual Studio Code 配置方法

万能的 VSC 当然也可以做到这个功能，搜索并下载插件 easy sass，然后在 setting.json 中修改/增加配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

"easysass.formats": [
  {
    "format": "expanded",
    "extension": ".wxss"
  },
  {
    "format": "compressed",
    "extension": ".min.wxss"
  }
]

上面 expanded 是编译生成的 .wxss 文件，下面 compressed 是压缩之后的 .wxss 样式文件，下面这个用不到可以把下面这个配置去掉，然后在 .gitignore 文件中加入要忽略的中间样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html

*.scss

当然也可以不添加，如果你的同事也是实用 scss 来开发小程序的话，其他跟上面一样，至此你就可以在小程序开发中快乐使用 scss 了～文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/22174.html