微信小程序使用sass——工程构建（vscode）和微信开发者工具

最新推荐文章于 2024-07-02 01:00:39 发布

Joyce的前端日常

最新推荐文章于 2024-07-02 01:00:39 发布

阅读量1.9w

点赞数 2

分类专栏：小程序文章标签：小程序 vscode 插件

本文链接：https://blog.csdn.net/joyce_lcy/article/details/83111322

版权

本文介绍了如何使用VSCode的Live Sass Compile插件将Sass实时编译为wxss，以及设置微信开发者工具支持ES6和使用其功能，包括运行页面、手机预览、权限和缓存清理，以提升微信小程序开发效率。

摘要由CSDN通过智能技术生成

微信小程序官方提供了比较完整的开发文档，也提供了官方的开发工具。但是本人还是习惯于用vscode，同时，可以安装vscode中的插件来辅助开发。

wxss的语法是原生的css，非常不方便，这个插件可以将sass实时打包为css，同样也也可以让后缀名为wxss。习惯于用less的，可以使用另一个插件：Easy WXLESS。

这个插件的默认方式是打包为css文件，如果能直接打包为wxss是最好不过的，所以需要修改配置文件。在工程的根目录找到或者创建文件夹.vscode下的settings.json添加如下配置：

{
"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".wxss",
      "savePath": null
    }
  ]
}

更详细的配置介绍，请参见：https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

在wxss文件的同级目录下新建.scss文件，点击vscode底部的[Watch Sass]后，所有的.scss会在修改后实时被打包为同名的.wxss文件，并会额外生成一个map文件。<

关注

专栏目录