使用 vscode 插件实现在小程序中使用 less/sass/scss

发表于 | 分类于 | 评论数： | 阅读次数：

总所周知,微信小程序的官方开发工具(微信开发者工具极其难用),因此我切换到了宇宙第一编辑器 vscode 进行小程序的开发.使用 vscode 开发可以安装两个扩展插件:minapp(支持微信小程序标签、属性的智能补全，并且提示中包含文档内容)和 wechat-snippet(这个插件主要的功能就是代码辅助，代码片段自动完成，可以作为上个插件的补充)

同时由于微信魔改的 css 文件(.wxss)并不支持 scss/less 等,所以这里我们也通过 vscode 插件来实现用 scss/less 写小程序样式

1.less

安装 easy-less

修改 vscode 配置文件

1
2
3
4
5
6
7
8
9


// 对EasyLess的配置，此段配置去掉则默认生成一个css文件
"less.compile": {
  "compress": false, //是否压缩
  "sourceMap": false, //是否生成map文件
  "out": true, // 是否输出文件，false为不输出
  "outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'
},

在需要 wxss 文件的目录下新建一个 less 文件,保存以后就会在同级目录中生成一个 wxss 文件.

2.sass/scss

安装 easy-sass

修改 vscode 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13


 // 对EasySass的配置，此段配置去掉则默认生成一个css文件和一个压缩的min.css文件
"easysass.formats": [
  {
    "format": "expanded", //格式，expanded不压缩，compressed压缩
    "extension": ".wxss" //输出文件的后缀,小程序可以写'wxss'
  },
  // {
  //   "format": "compressed",
  //   "extension": ".min.css"
  // }
],

相对于前者，EasySass支持一次多生成几种类型的文件，在配置数组里如上多写几个就行了。

使用方法同上

thank u !