HBuilderX 配置 Sass

用惯了 Webstorm，也来尝试下HBuilderX。但是，HBuilderX 的很多功能需要安装插件，其中我最喜的Sass就要插件。

这里以 HBuilderX 3.2.3 为例。

1. 安装 “scss/sass编译” 插件

工具--安装新插件--前往插件市场安装。

 在插件市场中查找“scss/sass编译”插件。

 

可以选择导入插件，也可以下载离线 zip 文件。这里以下载zip文件安装为例。

下载后，将zip包解压到HBuilderX的 plugins目录。

注意：解压后，目录名必须为 compile-node-sass。

这是官网的要求，不要用其他名字。

重启 HBuilderX 软件。

这一步很重要。

官网说要 npm 安装，我没有装 npm，也可以。

2. 配置 “scss/sass编译” 插件

工具--外部命令插件配置-- compile-node-sass-- package.json，对 “scss/sass编译”插件进行配置。

（1）更改输出CSS文件目录

默认 CSS 文件是在 SCSS 文件的同路径的。其 command 配置如下：

 个人不太喜欢这种，因为显得文件混乱。个人偏向把SCSS文件放在一个独立的文件夹中。因此，修改 command 代码如下：

 其含义为：生成的CSS文件放在 SCSS 文件所在文件夹同级的 CSS文件夹中。

（2）更改CSS代码的编译风格

SCSS 编译后的 CSS 文件，风格一般为：展开输出expanded、紧凑型compact、压缩输出compressed。

其中，压缩输出使用最多，可以减少CSS文件体积，提高编译效率。

在 command 中，继续添加代码：

 "--output-style",
 "compressed"

含义是：生成的CSS文件为压缩风格。

（3）更改 SCSS 文件编译时间

修改 commond 代码：

 "onDidSaveExecution": true

含义是：当保存SCSS文件的时候，就会自定编译成CSS文件。

配置完插件后，再次重启 HBuilderX 软件。这样，当我们编写 SCSS 代码后，Ctrl+S 后，就会自动生成 CSS 文件。