HBuilder X中使用外部Sass命令编译sass文件

短命女 2023-06-13 09:27 9阅读 0赞

本文章的前提是电脑里已经安装好了sass，  
HBuilder X有编译sass的node插件，之所以不用是发现老出错，而且把软件弄得打不开了，还好，HBuilder X可以自己定义外部命令和插件,既然电脑里安装了sass，那就可以使用自己电脑里的sass来编译

*  首先HBuilderX中打开自定义外部命令
    
    > 工具>外部命令/插件>自定义外部命令  
    > ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]**有两个界面，用户自定义的外部命令要写在右侧一栏，所有的参数左侧一栏都有提示，并且都有详细说明和例子**
 *  接下来把下面的代码复制到右侧一栏就可以了
    
        [{ 
        	"name": "Sass编译",
        	"command": ["sass", " --watch sass:css --sourcemap=none"],
        	"type": "terminal",
        	"key":"ctrl+alt+shift+s"
        }]
    
    上面的参数
    
    1.  name  
        name是这个自定义命令在HB中显示的名称，用于在“工具-运行外部命令”菜单中显示。
    2.  command  
        就是写命令和参数的地方，有两种写法，这里用数组的方式，因为里面用到了空格，第一种字符串的方式使用空格需要注意。  
        上面的command数组第一个字符串就是代表使用sass命令（没有添加到系统变量的需要写sass所在的全路径），第二个字符串就是参数。
    3.  type  
        命令运行的环境,有三个值，默认是process: 后台运行，运行时不显示输入输出，建议使用terminal，这是HB自带的终端插件，需要自己在插件中下载。
    4.  key  
        快捷键，可加可不加

> **"command": \[“sass”, " --watch sass:css --sourcemap=none"\]**

上面的–watch sass:css参数就代表监听当前目录中的sass和scss文件（因为HB默认在当前执行命令的文件中打开终端），如果有相关文件被创建就会生成相应的css文件到css文件夹下， --sourcemap=none参数就是不生成map文件，没有写这个的话生成css文件时默认会生成一个map文件  
举个例子  
![在这里插入图片描述][20191115151119792.png]  
项目中有一个sass文件夹用来保存sass文件，还有一个css文件夹用来保存css文件，使用刚刚创建的自定义命令，选择sass目录，单击右键，选择*外部命令/插件>Sass编译*或者使用快捷键就可以执行刚刚自己的命令了.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115144232603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ==,size_16,color_FFFFFF,t_70
[20191115151119792.png]: https://img-blog.csdnimg.cn/20191115151119792.png