DCloud_heavensoft
DCloud_heavensoft
  • 发布:2014-11-11 08:34
  • 更新:2023-10-09 22:52
  • 阅读:70082

HBuilder/HBuilder中less、sass、scss、stylus、typescript/ts等预编译语言的使用方法

分类:HBuilder

一、HBuilderX

1. 语法提示

HBuilderX自带less、scss的完整语法提示和转到定义,无需安装语法提示插件,但不支持stylus的语法提示。
HBuilderX的ts语法提示,需要在菜单【工具】-【插件安装】中安装typescript语法提示插件。

2. 编译

  • 在菜单工具-插件中安装less、sass、scss、stylus、typescript相关的插件,包括编译插件、格式化插件。
  • 安装编译插件后,对less/scss/stylus/ts文件点右键-外部命令,展开的菜单里会有编译菜单。
  • 除了编译菜单,插件下还有配置菜单(那个package.json文件),可设置快捷键、编译路径、是否保存时自动编译等。具体见http://ask.dcloud.net.cn/article/19599
  • 如果你工程下有webpack等编译器,执行npm运行命令时会走工程下的编译器而不是HBuilderX的插件。
  • uni-app项目由uni-app插件在保存时自动编译,无需手动配置。

3. 格式化

格式化less、scss、stylus、typescript等文件需要在插件安装里装prettier插件。然后正常按格式化快捷键ctrl+k即可。

二、老HBuilder

HBuilder支持less、sass。不支持stylus、typescript。

  1. less、scss代码提示:只能提示其中的css部分,less、sass仅支持对已编写的代码的单词提示
  2. 编译:
    对less、sass文件右键点击编译,即可正常编译
    HBuilder还支持预编译器配置,在菜单工具-预编译器配置里,可以自己选配less、sass甚至coffeescript等文件的预编译器,保存即可触发。
    Less文件配置说明, 其他文件可参照操作:
  3. npm全局安装less: npm install less -g
  4. hbuilder 菜单"工具"->"选项"->"预编译器", 修改.less 中的命令路径和命令参数, 也可以直接使用"智能完成".
  5. 如果"智能完成"失败, 请在"命令触发地址"中填写less全局安装后的命令文件lessc.cmd (windows) 或 less (mac)文件的路径. 命令参数请参照截图填写,也可自行修改保存路径
7 关注 分享
一点钟方向 不知道 b***@vip.qq.com Trust whosmyqueen joelewis 2***@qq.com

要回复文章请先登录注册

b***@163.com

b***@163.com

按照教程配置的,node.js也安装了,less也安装正确,但一直报“node不是内部或者外部命令”错误,问了有个情况相同的朋友是更新了Hbuilder后自己就解决了,而我是更新之后没变化,关机重启后就好了。具体原因不清楚,不过遇到问题的可是试试这种操作。
2018-03-08 09:24
2***@qq.com

2***@qq.com

按照说明配置,nodejs没问题,cmd可以运行node-v,可以运行lessc不报错。hbulider配置如图,可以右键编译,但是自动编译就会报错,求解答。
2017-08-08 20:49
9***@qq.com

9***@qq.com

回复 w***@163.com :
按你们的配置完路径和生成名称,但是最后还是无法自动编译,报node不是内部或外部命令
2017-05-05 10:26
kulutana

kulutana

less配置后可以使用!
2017-05-02 11:21
8***@qq.com

8***@qq.com

我按照步骤了依旧无法使用
2017-04-17 22:47
1***@qq.com

1***@qq.com

http://download.csdn.net/download/c_cyoxi/7594863 这是lessc.cmd的下载地址,下载后,按照它的步骤设置就可以进行自动预编译了。
2017-04-12 22:03
h***@163.com

h***@163.com

回复 9***@qq.com :
安装node后, 请重启HBuidler。并确认cmd中能执行node -v,
2017-03-13 16:12
9***@qq.com

9***@qq.com

我的报这个错 'node' 不是内部或外部命令,也不是可运行的程序
或批处理文件。 但是右键编译能成功 自动编译不行 就报错
2017-03-13 11:14
9***@qq.com

9***@qq.com

回复 笨笨鸟 :
请问一下,我的电脑里没有找到sass.bat?是需要先安装什么吗?
2017-01-05 14:42
dolphin的phin

dolphin的phin

没有代码提示吗 自动补全也没有吗
2016-12-19 14:26