HbuilderX中的less保存文件后自动编译为css的解决方案

原创已于 2023-03-10 09:57:51 修改 · 953 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #less #前端

于 2023-03-10 09:55:23 首次发布

文章介绍了如何在HbuilderX中安装和使用less编译插件，详细步骤包括安装插件、运行less文件以及设置保存时自动编译less文件为.css文件的功能。用户需在插件配置中修改特定参数并重启应用以实现自动编译。

1.安装less插件

2.运行less文件

3.设置保存完less文件，自动编译less并生成.css文件

1.安装less插件

工具-->插件安装-->安装less编译插件

2.运行less文件

写完less文件后，右击-->外部命令或插件-->less

3.设置保存完less文件，自动编译less并生成.css文件

在工具-->插件配置-->compile-less-->package.json文件-->将“onDidSaveExecution”的值改成true-->重启HbuilderX即可保存less的时候自动生成css文件

"external": {
		"type": "node",
		"programPath": "${pluginPath}",
		"executable": "/node_modules/.bin/lessc",
		"programName": "less",
		"commands": [
			{
				"id": "LESS_COMPILE",
				"name": "%external.commands.name%",
				"command": [
					"${programPath}",
					"${file}",
					"${fileBasename}.css"
				],
				"extensions": "less",
				"key": "",
				"showInParentMenu": false,
				"onDidSaveExecution": true
			}
		]
	},