HbuilderX中如何使用less进行css编译以及自动生成css文件

HbuilderX

工具:hbuilderX、less插件

1、安装less插件

在工具中找到——》“插件安装”——》安装less编译插件

HbuilderX中如何使用less进行css编译以及自动生成css文件_第1张图片 

 2、这个时候就可以写less,并且可以正常运行了

HbuilderX中如何使用less进行css编译以及自动生成css文件_第2张图片

HbuilderX中如何使用less进行css编译以及自动生成css文件_第3张图片 

HbuilderX中如何使用less进行css编译以及自动生成css文件_第4张图片 

 PS:如果想要编译之后的样式显示在css文件中,可以进行插件配置让less编译完自动生成css文件

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

HbuilderX中如何使用less进行css编译以及自动生成css文件_第5张图片

HbuilderX中如何使用less进行css编译以及自动生成css文件_第6张图片 

 ps:这个时候,页面上就可以使用连接编译后的css文件了

HbuilderX中如何使用less进行css编译以及自动生成css文件_第7张图片

每天进步一点点!!! 

你可能感兴趣的:(前端,less,前端)