微信小程序sass不编译怎么办_在微信小程序中使用less/sass

微信小程序中的样式文件wxss等同于css，并不支持less或sass语法。

webstorm本身可以配置less/sass文件监听并同步生成css或wxss。而vscode需要依赖插件，目前有两个插件可用于将less或sass文件生成对应的css或wxss文件，分别是easy less和 easy sass。

相关插件.png

插件使用演示如下：

Easy Less

下载安装了Easy Less 后，首先需要修改一下vscode的配置文件setting.json，增加的配置如下：

// 对EasyLess的配置，此段配置去掉则默认生成一个css文件

"less.compile": {

"compress": false, //是否压缩

"sourceMap": false, //是否生成map文件

"out": true, // 是否输出文件，false为不输出

"outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'

},

然后在对应的目录下新建一个***.less 文件，如下：

test.less

保存后自动生成的wxss文件如下：

test.wxss

注意：观察两幅图片可以发现，用//注释的语法在css中不支持，会被直接去掉。

Easy Sass

下载安装了Easy Sass 后，首先需要修改一下vscode的配置文件setting.json，增加的配置如下：

// 对EasySass的配置，此段配置去掉则默认生成一个css文件和一个压缩的min.css文件

"easysass.formats": [

{

"format": "expanded", //格式，expanded不压缩，compressed压缩

"extension": ".wxss" //输出文件的后缀,小程序可以写'wxss'

},

// {

// "format": "compressed",

// "extension": ".min.css"

// }

],

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

我们新建一个sass文件，如下：

test.scss

保存后vscode控制台输出会有提示文件的生成。生成的wxss文件如下：

test.wxss

注意：与easyLess生成的文件对比，会发现多了一个字符集的指定@charset "UTF-8";。同样//的注释被去掉了。

这样，就可以愉快得用less和sass写小程序啦,是不是真的很easy！！！